Why is margin-top not working in this case?

Question

I'd like to know why my class .top does not work for my second DIV wrapper top? I would expect to have 200px between the bottom of the picture on the right and the top of the red DIV but it's not working. See JSFIddle

HTML

<div class="wrapper top">
  <div class="block-1">
    <p><span>ddfsfsdsfds</p>
    <p>fdsfsdfs.</p>
    <p>dfsdfdsfds.</p>
  </div>
  <div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div>

</div><!-- End wrapper --> 
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>

CSS

body {
    background: #F2F2F2;
}
.top {
    margin-top: 200px;
}
.wrapper {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
}
.block-1 {
    float: left;
    box-sizing: border-box;
    padding: 20px;
    width: 60%;
    text-align: justify;
    background-clip: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-1 span {
    color: #124191;
    font-weight: bold;
}
.block-2 {
    float: right;
    overflow: hidden;
    box-sizing: border-box;
    width: 35%;
    padding: 20px;
    background-clip: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: justify;
}
.block-100pc {
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
    background-clip: border-box;
    background: #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: justify;
    clear: both;
    background: red;
}

score 5 · Accepted Answer · edited May 23 '17 at 12:11

5

That is because of the floated elements. They do not "count into" the height of their container, unless they are cleared.

There are several clearing techniques you can use, for example setting overflow: hidden on the container:

.wrapper {
    overflow: hidden;
}

jsFiddle Demo

edited May 23 '17 at 12:11

Community

1
1

answered Dec 16 '13 at 16:05

kapa

77,694
21
158
175

score 2 · Answer 2 · answered Dec 16 '13 at 16:04

2

.block-1 {
    margin-top: 200px; 

}

or

.top {
   margin-bottom: 200px;
}

either one should work

answered Dec 16 '13 at 16:04

CRABOLO

8,605
39
41
68

score 2 · Answer 3 · answered Dec 16 '13 at 16:04

The margin-top doesn't work in your case because the two block that are above it are floated. the margin-top property applies to the top of the parent.

In order to see a top margin, you will have to apply a margin-top= height of the hieghest floated div + the margin you want.

score 1 · Answer 4 · answered Dec 16 '13 at 16:10

You have some broken code in your fiddle, I've updated it with some fixes. Another thing is that you are not taking into account your padding when you've set the width of block-1 and block-2, therefor they are overlapping. Fix your block-1 width down to a lower percent to allow for the padding on the blocks. Here is an updated fiddle: http://jsfiddle.net/pB5kq/5/

<div class="wrapper top">

    <div class="block-1">
    <p><span>ddfsfsdsfds</span></p>
    <p>fdsfsdfs.</p>
    <p>dfsdfdsfds.</p>
    </div>

    <div class="block-2">
        <img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></img>
    </div>

<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>

Along with the other answers regarding floating divs and clearing, this should help.

Why is margin-top not working in this case?

4 Answers4