4

I have a horizontal layout that I'm using display: table-cell with to get a uniform height. This looks fine in Chrome, but I cannot get IE to render similarly.

http://jsfiddle.net/z8hys/4/

This is what I intend for it to look like: Chrome jsfiddle image.

But in IE9, IE10, and IE11 I get something that looks like this: IE jsfiddle image

  • Height of .cell needs to be dynamic.
  • Needs to work in at least IE.
  • Vertical dotted line, .top, has a variable height.
  • Horizontal dotted line, .right, has a variable position.
TylerH
  • 20,799
  • 66
  • 75
  • 101
dannyfritz
  • 396
  • 5
  • 12
  • 1
    In my testing, it appears that there is no (non-hack) way to make this work right in IE10. Check out this question, may be related: http://stackoverflow.com/q/18248214/870729 – random_user_name Jun 20 '14 at 20:17

1 Answers1

0

There are definitely other ways to get a uniform-heighted layout without using display:table-cell which work significantly better in IE11-. But it's hard for me to suggest one because I have no idea what the two little dotted lines are meant to denote or why they'd there.

But one suggestion, would be: http://jsfiddle.net/zq4EA/3/. Take a look and let me know if it doesn't work and why, and I'd be happy to keep working with you :) Hope that helps!

chloelonan
  • 136
  • 1
  • 3
  • The height needs to be determined by the contents of the .cell's. – dannyfritz Jun 20 '14 at 20:36
  • Yes, sorry. I just put that `height:100px` for my little testing purposes. Are there specific widths the cells are supposed to take? For example, are they supposed to be two evenly-spaced columns? This fiddle has two evenly space columns: http://jsfiddle.net/zq4EA/5/ – chloelonan Jun 20 '14 at 20:58