www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Floating Div's and surrounding div

  1. #1
    Join Date
    Aug 2009
    Posts
    4

    resolved [RESOLVED] Floating Div's and surrounding div

    Hey guys,

    I'm building a website right now, and I wanted to make two columns within my content div. I made two floating div's so they were next to eachother. Now when I place more information in my floating divs, the content div won't grow with the inner div's. I've been looking for a solution for this problem, but I could only find things to make a scrollbar, and one thing I hate is scrollbars that aren't the browser's scrollbar.

    Here's some code:
    HTML Code:
    <body>
    	<div id="container">
    		<div id="header"></div>
            <div id="menu">
            	<?php include("include/menu.php"); ?>
            </div>
            <div id="contentainer">
            	<div id="content">
    <div id="blogcontent">
    	<div class="item">
        	<div class="title">Blog-item 1</div>
            <div class="content">
            	Er komt hier dus al best wel wat tekst te staan die ik maar even uit me hoofd hier neer moet lullen.
                Dat gaat me opzich nog best makkelijk af lalalalalalalalalaa ik ben gek.
            </div>
            <div class="readmore"><a href="article.php?id=1">Lees meer</a></div>
            <div class="date">12-07-1988</div>
        </div>
        <div class="item">
        	<div class="title">Blog-item 1</div>
            <div class="content">
            	Er komt hier dus al best wel wat tekst te staan die ik maar even uit me hoofd hier neer moet lullen.
                Dat gaat me opzich nog best makkelijk af lalalalalalalalalaa ik ben gek.
            </div>
            <div class="readmore"><a href="article.php?id=1">Lees meer</a></div>
            <div class="date">12-07-1988</div>
        </div>
        <div class="item">
        	<div class="title">Blog-item 1</div>
            <div class="content">
            	Er komt hier dus al best wel wat tekst te staan die ik maar even uit me hoofd hier neer moet lullen.
                Dat gaat me opzich nog best makkelijk af lalalalalalalalalaa ik ben gek.
            </div>
            <div class="readmore"><a href="article.php?id=1">Lees meer</a></div>
            <div class="date">12-07-1988</div>
        </div>
    </div>
    <div id="fotocontent"">
    	<div class="item">
    		<div class="title">Foto's</div>
        </div>
    </div>
    </div>
            </div>
         </div>
    </body>
    And my css:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	margin-top: 0px;
    }
    
    #container {
    	width: 1024px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #header {
    	background: url(images/newheader.jpeg);
    	height: 138px;
    	width: 1024px;
    }
    
    #menu {
    	height: 25px;
    	background: #38a31e;
    }
    
    #links {
    	padding: 0;
    	margin: 0;
    	text-align: center;
    	list-style: none;
    }
    
    #links li {
    	background: #38a31e;
    	float: left;
    	width: 120px;
    	height: 25px;
    }
    
    #links li:hover {
    	background: #adc02e;
    }
    
    #links a {
    	display: block;
    	height: 25px;
    	text-decoration: none;
    	color: #adc02e;
    	font-size: 1.2em;
    	font-family: "Cooper Black", "Lucida Sans", sans-serif;
    }
    
    #links a:hover {
    	color: #38a31e;
    }
    
    #content {
    	background: #adc02e;
    	height: 400px;
    	overflow: auto;
    }
    
    #links .selected {
    	background: #adc02e;
    	color: #38a31e;
    }
    
    #blogcontent {
    	width: 48%;
    	min-height: 300px;
    	margin-left: 7px;
    	margin-top: 7px;
    	border: 5px red dashed;
    	float: left;
    }
    
    #fotocontent {
    	width: 48%;
    	min-height: 300px;
    	margin-right: 7px;
    	margin-top: 7px;
    	border: 5px red dashed;
    	float: right;
    }
    
    .item {
    	margin: 9px;
    	padding: 5px;
    	border: 1px black solid;
    	min-height: 100px;
    	width: 94%
    }
    
    .title {
    	font-size: 20px;
    	font-weight: bold;
    }
    The html seems a bit messy, but that's because I use the php include a few times.
    The css is probably ****ty too, but that's because I'm bad at it.

    Thanks for your help,

    mrpaplu

  2. #2
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    The scrollbars are appearing because you have set the DIV content to a fixed height

  3. #3
    Join Date
    Aug 2009
    Posts
    4
    Ow, stupid mistake, I had been fooling around with my code, I didn't change the height: 400px; back in min-height: 400px;.

    But even with a min-height or no height at all, my content still doesn't grow with the nested div's.

    Maybe this will help trieing to find out what's wrong: http://mylowlife.clanslayers.com/index.php

  4. #4
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    Yes yes yes...

    This is unfortunate about floats...
    Easiest would be to add another DIV element last inside your DIV content.

    make this div to clear:both

  5. #5
    Join Date
    Aug 2009
    Posts
    4
    I'd tried that before, wrong way I guess. It's working now, thank you.

  6. #6
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    Splendid

    You can set this thread to Resolved now, you can find this under Thread tools

    Cheers

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles