CODEWITHSUNDEEP
htmlcss-float
arbme
arbme

Reputation: 4931

floating div loses parents class with clear:both;?

I am having a little trouble trying to put a border around both rows. It currently only does the first row.

I have used clear:both; for a new row of divs but its seems to take away the parent divs style with the border.

<style type="text/css">
.box {
    border: 1px solid #E5E5E5;
    border-radius: 4px 4px 4px 4px;
    width: 90%;
}
</style>

<div class="box">
    <div style="float:left; width:150px;">
        Row 1, Column 1
    </div>
    <div style="float:left; width:150px;">
        Row 1, Column 2
    </div>

    <div style="clear:both;"></div>

    <div style="float:left; width:150px;">
        Row 2, Column 1
    </div>
    <div style="float:left; width:150px;">
        Row 2, Column 2
    </div>
</div>

Thanks

Upvotes: 0

Views: 185

Answers (2)

davidgmar
davidgmar

Reputation: 568

If you want to keep the same HTML structure, simply add a clear:both container after your last div. http://jsfiddle.net/7cptj/

Upvotes: 1

seeming.amusing
seeming.amusing

Reputation: 1179

Try adding a clearing div after your second row. That should resolve your issue.

The reason being is that when you float an element, you are more or less breaking it out of its parent element. clear: both places a blank element relatively below to your floated divs, thus keeping the "space" that the floated divs normally would occupy.

Upvotes: 0

Related Questions