Vivid Lust Posted February 17, 2008 Share Posted February 17, 2008 Hi, im floating a couple of divs inside a container. The problem is, is that they are overlapping it and not staying in side. So that when i add data the floats height increases but not the container. Screen Shot: http://sixpop.com/images/file/14694217.jpg Html: <!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>No Title</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div id="profilewrap"> <div id="block12"> STUFF <div id="leftblock"></div> <div id="righblock"> </div> </div> </body> </html> Css: body{ background: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin: 0px; padding: 0px; text-align: center; } #profilewrap{ } #block12{ background: #000; color: #fff; padding: 5px; width: 750px; text-align: left; margin: 0 auto; } #leftblock{ width: 375px; float: left; margin: 0; } #righblock{ width: 375px; float: right; margin: 0; } Please help!, thanks in advanced!!!!!! Quote Link to comment Share on other sites More sharing options...
AndyB Posted February 17, 2008 Share Posted February 17, 2008 http://css.maxdesign.com.au/floatutorial/ - that's the best float resource around Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 17, 2008 Share Posted February 17, 2008 The solution is the same as the one I posted here - http://www.phpfreaks.com/forums/index.php/topic,182099.msg816584.html#msg816584 But don't rely on what Dreamweaver's visual display claims a page will look like. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted February 18, 2008 Share Posted February 18, 2008 get a div in there after the two floated divs that has "clear: both;" <div id="float_left"></div> <div id="float_right"></div> <div class="clear"></div> .clear { clear: both; } Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 18, 2008 Share Posted February 18, 2008 get a div in there after the two floated divs that has "clear: both;" No don't do that, use the technique I posted above Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted February 19, 2008 Share Posted February 19, 2008 bronzemonkey's right. For a true cross-browser/platform solution. Using just clear:both can work in IE but doesn't always work in modern Gecko browsers (one of the few, if not ONLY case, where IE actually gets it right). Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted February 19, 2008 Share Posted February 19, 2008 you mean this: /*For modern browsers like FF, Opera, Safari, etc*/ #main:after { clear:both; display:block; height:0; content:"."; font-size:0; line-height:0; visibility:hidden; } /*For IE7*/ *+html #main { min-height:1px; } /*For IE6*/ * html #main { height:1px; } You've got to be kidding me. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 19, 2008 Share Posted February 19, 2008 You've got to be kidding me. No, it's based on this - http://www.positioniseverything.net/easyclearing.html - which has been in use for some time now. Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted February 19, 2008 Share Posted February 19, 2008 It's true TFG. The "Easy Clearing Method" is the solution that most books on css either recommend or provide a link to as being the best float clearing method. I personally, however, like bronzemonkey's version of it much better since it doesn't require putting a blank select in the markup (after all, css is about REDUCING markup level code). BUT! That's not to say using the clear element on its own doesn't ever work. It totally depends on the situation - and this is when it can get tricky trying to determine WHEN the easy fix method is needed and where or how to implement it. The actual example that the article uses even requires an inline clear for a paragraph between two samples (one with and one without the fix). Here is the complete code for the example they use (only I exchanged their old "clearfix" method with bronzemonkey's revised version. You can play with it yourself by removing the clearfix solution from the css and attempting to clear the float just using clear:both in the class. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>clear floats with clear in css</title> <style type="text/css"> <!-- /* added "noclear" container because the original used clearfix as a class in demos 2 */ .noclear { border: 4px solid #000; margin: 10px 0 0; background: #dc8; font-size: 1.2em; clear:both } .noclear p {margin:0} .floatholder { border: 4px solid #000; margin: 10px 0 0; background: #dc8; font-size: 1.2em; } .floatbox { float: left; width: 35%; background: #773; border: 3px solid #f55; color: #ffd; } .floatbox p {margin: 0;} .floatholder p {margin: 0;} .floatholder:after { content: "."; display: block; height: 0; font-size: 0; line-height: 0; clear: both; visibility: hidden; } /* for IE6 only - since IE 6 doesn't support min/max */ *html .floatholder {height: 1%;} /* for IE7 only */ *+html .floatholder {min-height: 1px;} --> </style> </head> <body> <div style="margin: 0pt 20%; height: 1%;"> <div class="noclear"> <!-- add clear:both in the css and you will see it makes no difference --> <div class="floatbox"> <p>This float is not enclosed by the surrounding div container. </p> </div> <p>This container lacks the fix.</p> </div> <p style="height: 20px; clear:both">Just a spacer div between the two demos - remove clear:both to see what happens - this is a case when the clear element works</p> <div class="floatholder"> <div class="floatbox"> <p>See how this float no longer protrudes out of the containing box, with no extra clearing element used in the container!</p> </div> <p>This float container has a class attribute of "clearfix", which applies the :after fix, or the Holly hack, depending on the browser.</p> </div> </div> </body> </html> Sometimes, I find that I need to float the container that holds the floated elements that I want cleared. This is when I have multiple columns each containing multiple floated elements. It can then get a little hairy. When it does, I know that I either missed something OR I "over-engineered" the clearfix and made it too complicated - when a simple clear:both could have worked in a paragraph somewhere. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.