I have a problem I can't figure out. When I nest a div inside another div and I want to give the outer div a border, the border doesn't wrap around the rendered content. Even though the content of the inside divs might be several lines high the outside border only adds whatever padding there might be.The CSS:.wrapper { width:550px; border: 1px solid #ccc; clear:both; padding: 5px;  }.content { float:left; width:250px; background-color:#e1e1e1;}The HTML:<div class=wrapper><div class=content>    text<br>    text<br>    text<br></div><div class=content> pic</div>
Why is the outer div border not dependent on the element's rendered content?
css
When an element contains another that is floated, the first element will not seem to contain the second. The accepted solution will work, however I don't like it because it requires extra markup to resolve a layout issue.A more preferred solution - in my eyes, anyway - is to set the parent overflow to auto:.wrapper {    overflow: auto;}That will cause the parent element to contain the child elements.