CODEWITHSUNDEEP
htmlcssinternet-explorer-9margin
Rob Johansen
Rob Johansen

Reputation: 5164

IE 9 ignores margin-bottom of last element on page

If I add a margin-bottom to the last element on a page (a div in my case), it's ignored in IE 9. In other words, the last element is flush with the bottom of the window.

Is this a known issue? It works as expected in Chrome/Firefox.

Upvotes: 0

Views: 859

Answers (2)

Dom Latham
Dom Latham

Reputation: 71

This is true if the divs are floated but the containing div is not.

<div class='outer'>
   <div class='inner'>dfsdfs</div>
   <div class='inner'>sdfsdf</div>
   <div class='inner'>vxcvxv</div>
   <div class='inner'>cvxcv</div>
</div>

div.outer {
   background: green;
}

div.inner {
   height: 50px;
   background: red;
   margin-bottom: 50px;
   display:block;
   float:left;
   clear:left;
}

Upvotes: 1

Sampson
Sampson

Reputation: 268344

I have setup a simple test to see whether or not I could reproduce your issue. First, following your lead, I provided some HTML - being sure to make the last element a div:

<div></div><div></div>
<div></div><div></div>

Then some styles:

div {
  height: 50px;
  background: red;
  margin-bottom: 50px;
}

I then proceeded to test IE9 on Windows 7 using browserstack - I was unable to reproduce your issue. In my case, the browser properly rendered the appropriate spacing around the last element.

Fiddle: http://jsfiddle.net/jonathansampson/EgjVn/

Upvotes: 0

Related Questions