Tried searching but couldn’t find anything. Maybe I just fail at search…
I am trying to get 3 floated divs to fill a containing div. For some reason the containing div is giving no indication that anything is inside it at all. The background color of #efefef is only visible as a 15px strip…because of the padding.
<style>
#main {
background: #efefef;
width: 900px;
margin-top: 15px;
padding-top: 15px;
//float: left; this makes main fill with the contained divs, but it seems...strange to have to do that?
}
#one {
float: left;
width: 300px;
}
#two {
float: left;
width: 300px;
}
#three {
float: left;
width: 300px;
}
</style>
<div id="main">
<div id="one">
<p>Here is some text in div one!</p>
</div>
<div id="two">
<p>Here is some text in div two!</p>
</div>
<div id="three">
<p>Here is some text in div three!</p>
</div>
</div>
You have to clear your floats. I know people around here don’t like it, but the simplest way is to just add a clearing div.
<div id="main">
<div id="one">
<p>Here is some text in div one!</p>
</div>
<div id="two">
<p>Here is some text in div two!</p>
</div>
<div id="three">
<p>Here is some text in div three!</p>
</div>
<div style="clear: both;"></div>
</div>
You can also see this thread:
Also, you should set a width on any your floated divs, including the inner ones.
Worked perfectly! I’ve seen that used before, but with span instead of div?
It still puzzles me that it also works if I float the containing div…in this case, the div named “main”. If I just float it to the left, the other divs fill it just fine. I wish I understood why!!
The best practice is not to use a clearing element, as that is essentially presentational mark up. Give #main {overflow:hidden;}that way you wont have to use a clearing div.
Dresden_P is quite right - WASTING markup on a clear is just bad practice and outdated coding… to be filed alongside other clearing techniques like “clearfix” classes in the “outdated/outmoded/just plain wasteful” bin.
Also beware IE6- overflow:hidden doesn’t work for float wrapping, but your width declaration trips something known as “haslayout” so IE will wrap the floats anyways. The only reason it works in IE7+ is they made overflow a haslayout trigger.
You may have noticed that in IE6 your original code did in fact wrap your floats… all because of that width:900px on #main – this is an INCORRECT behavior, even when it is the desirable one… if you still give a flying purple fish.
Honestly, I’m still a little shocked to see people recommending a clearing DIV; what is this, 2001? looks at all the new sites still being written as HTML 3.2 with a 4 tranny or 5 lip-service on it… my bad, I guess it’s 1997
The “clear” property only applies to block elements and shouldn’t be used with a span (although setting the span to display:block would have the desired effect).
We have a section on haslayout in the Sitepoint reference which covers most bases.
That’s because it works. It is the simplest solution that is known to work across all browsers. Clearfix is a hack. Clearfix generates content in the CSS then hides it. That’s more absurd than using a clearing div.
When I started making websites as a hobby, I don’t think using overflow: auto or hidden was widely known. The way it was done was to use a clearing div. Is overflow: auto a better alternative? Perhaps. Does it work across all browsers? Maybe, I don’t know. There are a few potential issues with using overflow to clear floats that people should be aware of.
That “problem” is more failure to understand what elements to put it on and which ones not to… You want a scrollbar, it shouldn’t be used on your outermost width container!
That’s a very selective and frankly broken way of adding wrapping behavior – kind of cherry picked to piss on overflow:hidden for… well… I don’t know why.
Though there is another “fix” we’ve not discussed; float’s wrap floats
I haven’t used a clearing div in at least six or seven YEARS. Maybe longer. I’ve NEVER used that bloated clearfix nonsense… never needed it.
The overflow method for clearing floats was attributed to me back in 2005 when I causally mentioned to Alex that it was the method I was using at the time. It’s a good method when you don’t want visible overflow or if you don’t have fluid width containers where content may get cut off. Of course you can use any property that creates a new block formatting context to contain floats (eg. float, inline-block, display:table, absolute positioning - all will contain floated children but their use does depend on situation and all have side effects.)
Unlike Jason I don’t see a problem with using clearfix for the odd element but it is not without its problems either and I very rarely have need to use it.
In the end it boils down to an understanding of the dynamics of what you are doing and then you use a suitable method. The beauty (and the beast) of CSS is that there is never one way to do something for every occasion. It’s flexibility may be a drawback to quick learning but in the end creates a powerful set of tools to work with.
Funny part is MOST of my ‘issue’ with clearfix has nothing to do with it’s CSS – it’s the wrapping it in a presentational class in the HTML I have the problem with.
Same problem I have with classes like “smalltext”, “heading”, “left”, or that OOCSS idiocy… saying what things look like instead of what they are – completely missing several of the reasons to use CSS in the first place.
Ok - I understand what you mean and yes adding the class to the html is a bit lazy when it can be done via the css anyway as 99% of the time the hook will be already be there to use.
