This is a quickie mainly to remind myself. My friend and fellow Fudge developer, Mike “1312” Byrne showed me a CSS trick to have divs clear themselves.
div#container
{
height: 1%;
}
div#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}Brilliant. This works in Safari, Firefox and IE6+ as far as I know.
(Possibly) Related Posts
- No related posts
If you found this post or anything else on this site of any use, then please take the time to recommend me on Working with Rails.
4 Responses to “Self Clearing Floats in CSS”
This is the clear-fix solution. However, for most uses it really is outdated, using overflow: auto; will do the trick most of the time.
overflow: hidden
_height: 1%
works 99% of the time just as well.
I would say, just “overflow: hidden” works 99% of the time. :)
For IE6 you may want to specify the width of the container explicitly, but again, only if the overflow rule doesn’t work, which is extremely rare.
Most people don’t know that adding overflow:auto on the parent of a floated element will automatically make the parent contain the floated child. Also, you can float the parent (float nearly everything) and that will fix the issue.