CODEWITHSUNDEEP
csscss-floatmargin
Hommer Smith
Hommer Smith

Reputation: 27862

Margin in a clear both container not being applied

I have the following HTML 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>

The following CSS:

#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;}
div.bottom {clear:both; margin-top:20px;}

And the following question:

How can I make the bottom div have some margin from the content wrapper container?

You can see it live here , that the margin is not being applied.

Upvotes: 0

Views: 1565

Answers (4)

Sammy
Sammy

Reputation: 3099

If you add float:left to div.bottom the margin will work. If you do not wish to use float, padding-top{20px) will work like Koby mentioned.

Also in your HTML you have <div class="contentWrapper"> but in your CSS #content_wrapper.. change that to .content_wrapper {

Upvotes: 1

Wouter Dorgelo
Wouter Dorgelo

Reputation: 11998

change HTML into:

<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 style="clear:both;" />
    <div class = "bottom">
        bottom content
    </div>
</div>

And CSS into:

#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;}
div.bottom {margin-top:20px;}

See: http://jsfiddle.net/L8YN6/11/ ​

Upvotes: 0

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107586

I would approach this a little differently, using a separate but reusable "clearing" element: http://jsfiddle.net/L8YN6/16/

<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="clearing">&nbsp;</div>
    <div class = "bottom">
        bottom content
    </div>
</div>

And the CSS becomes:

#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;}
div.clearing { clear: both; line-height: 0; font-size: 0; overflow: hidden; }
div.bottom { margin-top: 20px }

​I prefer this approach to wrestling with different browser's interpretations of the "float" specification for CSS. Alternatively, you could employ the self-clearing floats method.

Upvotes: 0

Koby Mizrahy
Koby Mizrahy

Reputation: 1371

What about using padding-top instead of margin-top ? it will push the content of the div 20px to the bottom:

div.bottom {clear: both; padding-top:20px;}

Upvotes: 0

Related Questions