Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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>

share|improve this question
add comment

4 Answers 4

up vote 4 down vote accepted

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.

share|improve this answer
add comment

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>
share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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