CODEWITHSUNDEEP
htmlcsslayout
Greg
Greg

Reputation: 3063

Why is margin-top not working in this case?

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;
}

Upvotes: 3

Views: 126

Answers (4)

tremor
tremor

Reputation: 3186

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.

Upvotes: 1

kapa
kapa

Reputation: 78671

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

Upvotes: 5

web-tiki
web-tiki

Reputation: 103760

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.

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

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

}

or 

.top {
   margin-bottom: 200px;
}

either one should work

Upvotes: 2

Related Questions