My Little Corner of the Net

CSS Trick for the Nested DIV “Problem”

This is more for me than anything, but I can never remember how to make a parent object expand to contain all of its content objects when all of the contents are floated.  Every time I need to do this I end up googling for the solution, but it often takes a while to find.

So, to save me time next time, I’m posting the solution that I always stumble up from here on my blog.

All I need to do is add this CSS to my container element

#container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;

Remember to change #container to the actual id of the container element, of course.

Leave a Reply

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>