5

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>

4 Answers 4

4

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.

2

It's because of the floats. You need to clear them before the closing </div> tag. Try this:

<div class="wrapper">
    <div class="content">
        text<br>
        text<br>
        text<br>
    </div>
    <div class="content">
         pic
    </div>
    <br style="clear: both;">
</div>
1

To clear the floats without any additional markup use overflow:hidden

.wrapper {overflow:hidden;zoom:1;}

The zoom:1 will invoke hasLayout in ie6 so the float will clear in ie6.

0

There is a pretty extensive article about clearing floats here: http://www.positioniseverything.net/easyclearing.html

It also suggest not to use any additional markup. Instead a uses a simple css-class, which you add everytime you want to clear floats.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.