CODEWITHSUNDEEP
csscss-float
Hommer Smith
Hommer Smith

Reputation: 27852

Two columns floated (right and left) but content in the middle

I have simplified the code I have in order to simplify, but here it comes my code:

<div class = "content_wrapper">
    <div class = "left_side">
        LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
            LEFT SIDE<br>
    </div>
    <div class = "right_side">
        RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
                RIGHT SIDE<br>
    </div>
    <div class = "bottom">
        bottom content
    </div>
</div>

And the css is:

#content_wrapper
{
    width: 960px;
    margin: 0 auto;
}

div.left_side{margin:0px; width:100px; padding:0px 0 0 5px; float:left;}
div.right_side{margin:0px; width:100px; padding:0px 0 0 5px; float:right;}

You can see it live in here: jsfiddle.

How can I make the bottom content right down the two right and left containers? I don't know why is going into the middle of those two, if the div is after them.

Upvotes: 0

Views: 101

Answers (2)

sarwar026
sarwar026

Reputation: 3821

http://jsfiddle.net/L8YN6/2/

Adding the following is working, i guess:

div.bottom {clear:both;}

Upvotes: 2

Salil Momin
Salil Momin

Reputation: 361

add this CSS

.bottom{clear:both;}

Upvotes: 2

Related Questions