Question

Here is working solution for Chrome and probably Firefox:

http://jsfiddle.net/gHcRX/

Adding height:100% to all tables gives the div required data to calculate the actual height of parent.

But why this doesn’t work in Internet Explorer and Opera…

Don’t want to use javascript for this.

Is there any simple cross-browser solution?

Answer 1

First off, you should NOT be using tables for layout. It’s bad practice, and will not work well across different browsers.

If all you want to achieve is getting the divs to expand 100%, you could do something like this:

<div style="height:300px">
    <div style="float:left;height:100%;background:green;">block1</div>
    <div style="float:left;height:100%;background:red;">block2</div>
</div>

http://jsfiddle.net/gHcRX/20/