View Full Version : vertically fill space, with in display: table-cell (IE8/9)

11-08-2011, 08:10 PM
i have a nested display table in a display table cell and i doesnt seem to apply the 100% height to IE 8 or 9 (even a extra containing div wont work), works fine in all other major browsers, here the jsfiddle it should explain everything.

http://jsfiddle.net/bDm4d/12/ try that in firefox/chrome/safari to see how it should look and check in ie8/9 youll understand the issue. Both columns should be equal height, since they are both with in a display table cell. The center (green in the right, pink in the left) have height to auto so it "should expand" like it does in webkit/ff.

A work around for ie would be great conditional or not.

11-09-2011, 06:27 AM
Just for your knowledge: (browser support)

First off,
1. why you do this? give me headache :C
2. ie has an inheritance/hasLayout problem

what about just setting a height to .imgrow?, you are using height: auto; a bunch of times, but that is default already! it does nothing defining them over and over again. essentially you only have a div with 20px height as content. ie only recognizes this as a height. all the table-row and table-cell don't have a height to ie.

the best fix: just set a height to .imgrow!


11-09-2011, 03:21 PM
1) Lol, sorry about the headache i caused. Although i have my reasons for needing to use this layout, my template design is quite complex unfortunately. my example is merely 1/5 of the complexity of my actual template to be honest its a handful already.
2) And thanks for the information the hasLayout link clarified some things, ill try to work with that first and let you know.
3) No i can't set a height to any of the columns, they have dynamic content thus need to size themselves. Lastly i set them to auto simply because its easier to debug with the values there (ie swap in firebug/devtools) to see how it changes things, i will obviously remove them once i finalize it. and those internal div are dummy to represent content. sorry i didnt clarify that earlier.

11-09-2011, 05:02 PM
Well i tried using * { zoom: 1 }, thinking it would be the fastest solution but no change. Any other idea's?
I'm Also open to other suggestions on how to make this work, like remove the parent display: table completely, i've actually been trying to get that to work since yesterday. but its hard to make the second column *autofill* available space automatically, is there any way to make use of "moz-available" like css to make it work across browsers.
Essentially what i need is a three column layout, left column auto width base on content, middle column fixed, right column autofill based on parent (which has a % height). All of equal height based on the tallest and lastly the ability to use tables inside them. Oh and i cant use floats it breaks everything else around it sorry.

11-10-2011, 01:37 AM
sorry I don't think that's possible since browser consistency isn't there! the content within the green space has to be more than 20px if you want it to fill all the green. I can't imagine a need to create a layout like you described though!

11-10-2011, 09:21 PM
bummer no body else got idea's?
how about with floats, i could try to solve the issues with surrounding elements if we can do it with floats, i even willing to remove a column.

Ok hows, this.. Two columns, Left one auto witdh base on childrens DEFINED width, Right one fill remaining space in the parents DEFINED width. both columns should not break with display tables inside and must have equal height.

(just make it work in IE8/9 ill make this whole thing conditional if necessary)