Question

I have a wrapper on my page that is styled by this rule

#wrapper{
    width: 900px;
    margin: 0 auto;
    background: #FFF;
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}

Problem is, the wrapper doesn’t grow if the children are floated. After a little Googling i found that adding display:none would solve it. And it did, but i can’t do that since some of my element HAVE to overflow the wrapper (design elements that are sticking out through the wrapper).
How can i solve it without using overflow:hidden?

Answer 1

You need to clear your floated elements e.g.

<div style="float:left"></div>
<div style="float:right"></div>
<div style="clear:both"></div>