CODEWITHSUNDEEP
cssinternet-explorer-8internet-explorer-9
troelskn
troelskn

Reputation: 117467

How do I get IE < 10 to apply negative margins?

I have a list of items, that I want to present in a grid. To keep it flexible, I'd prefer to simply have the elements float inside a container and control their width with a percentage. E.g.:

<div style="overflow:hidden">
  <div style="float:left ; width:25%">Element 1</div>
  <div style="float:left ; width:25%">Element 2</div>
  <div style="float:left ; width:25%">Element 3</div>
  <div style="float:left ; width:25%">Element 4</div>
  <!-- etc. -->
</div>

Now, I would also like to have a gutter between these cells. Again, this is simple enough - Just apply a margin or padding to the cells. However, this also gives me a gutter on the edges of the container, which is not what I want.

To get around this, I have created two containers within each other, where the inner container gets a negative margin equal to the padding of the cells. This actually works well in modern browsers, but it fails in IE 9 and older. I don't care much for IE 7 and backwards, but IE 8 + 9 still have too big a market share to ignore.

So my question is: Why does IE 8 + 9 not give me a negative horizontal margin in the following fiddle (Note that it actually does give a vertical negative margin - it just doesn't do the same horizontally). And of course, what can I do to fix this?

http://jsfiddle.net/Pd4vd/1/

Upvotes: 1

Views: 1319

Answers (1)

AmirHussein
AmirHussein

Reputation: 96

Try put this code on the head of page:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Upvotes: 2

Related Questions