CODEWITHSUNDEEP
htmlcssinternet-explorer
Spencer May
Spencer May

Reputation: 4545

Height 100% not working in IE

I know there are many questions about this and I have looked at all of them. I have a site where I need the left <td> to extend by 100%. I have all the containing blocks set to 100% and this works great in chrome and safari. However it does not extend to the base of the screen in IE or Firefox. I have a rough sketch of it here since the code is too long to paste. I have also included the css in the page to make it easier to view.

I used these two posts but neither has fixed my issue. CSS 100% height in ie Div 100% height works on Firefox but not in IE

Am I missing a container or is there a special way to make this happen in IE and Firefox? This is my first time messing with 100% height in css.

Upvotes: 0

Views: 4598

Answers (2)

Itay
Itay

Reputation: 16785

The best way I can think of is wrapping both panels with a bigger absolute DIV and that way you can give the inner div a (working) style like this:

height: 100%;

I've made an example here:

Result - http://fiddle.jshell.net/E8SK6/1/show/

Code - http://jsfiddle.net/E8SK6/1/

Upvotes: 0

meub
meub

Reputation: 2318

It's because of this line of css in td.left:

display:inline-block;

Remove it so it stays the default: display:table-cell. Then it works in IE.

I strongly encourage you not to use tables for this sort of layout though. Here's a good tutorial that will show you how to do this using divs+css: http://learnlayout.com/

Upvotes: 4

Related Questions