April 2, 200917 yr Hi guys, I am building a site and basically when I float the two content boxes within a content container, the container stays at a set height and doesn't expand with the other two boxes... see example: Here is the example code (obviously it isn't the real site but you get the gist): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #main { background-color:#999999; width:400px; padding:20px; } #x1 { width:120px; background-color:#009900; float:left; } #x2 { width:120px; background-color:#FF0000; float:left; margin-left:30px; } </style> </head> <body> <div id="main"> <div id="x1"> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> </div> <div id="x2"> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> </div> </div> </body> </html> Any ideas guys - when it is just the one bit of content in there with no float then it works fine.... weird!! Cheers lads and ladies
April 2, 200917 yr You need to put some kind of footer or something inside the #main that will clear them both. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> #main { background-color:#999999; width:400px; padding:20px; } #x1 { display:block; width:120px; background-color:#009900; float:left; } #x2 { display:block; width:120px; background-color:#FF0000; float:left; margin-left:30px; } .clear{ clear:both; } </style> </head> <body> <div id="main"> <div id="x1"> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> </div> <div id="x2"> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> <p>BLAH BLAH BLAH</p> </div> <div class="clear"> </div> </div> </body> </html> Something like that, probably needs tweaking but basically you need to add the 'clear both' after the floats to stretch your main to the bottom.
April 2, 200917 yr If I understand the problem correctly, add: <div style="clear:both;"></div> </div> </div> under the floated divs.
April 2, 200917 yr Author thanks guys - problem solved!! That is what 2hrs sleep in 24hrs will do to you.... turn you brain to MUSH!! lol Many thanks
April 3, 200917 yr you know 4 people have asked me that exact same question in the last week, it must be a common problem.
April 3, 200917 yr Author Yeah it is something I have done a few times before - learned from Gareth Daines' tutorial, but for some reason last night my brain just wouldn't comprehend the Clear:both; lol Cheers for your help
Create an account or sign in to comment