How do I convert this table layout to a div layout?

Question

I was recommended by a friend to use the div layout, but I cant get it to work.

I am trying to accomplish the following diagram:

+-----------------------------------------+
|           Fixed Height = 50             |
+-----------------------------------------+
|         |                  |            |
|         |                  |            |
|  Fixed  |     Whatever     |    Fixed   |
|  Width  |     Remains      |    Width   | Total Height = 500px
|    =    |      In All      |      =     | Total Width  = 600px
|   150   |    Directions    |     150    |
|         |                  |            |
|         |                  |            |
|         |                  |            |                    
+-----------------------------------------+
|           Fixed Height = 50             |
+-----------------------------------------+

Essentially, convert http://jsfiddle.net/qPgVx/ . to http://jsfiddle.net/blineberry/juckh/7/ (but with divs)

The reason that this isnt arbitrary, is because the entire form can be dynamically resized with js and I want the center to expand and contract as necessary.

My problem is that I cannot get the middle to fill the height. How do I fix this?

Answer 1

See: http://jsfiddle.net/thirtydot/kBHCR/

As you can see, when the width and height of .Window are adjusted, everything resizes.

This will work in IE7+ and all modern browsers.

It blatantly won't work in IE6. If you need to support IE6, you can either use JavaScript for only IE6, or you can stick with a <table>. If you want to support IE6, there's a price to pay.

CSS:

.Window {
    width: 600px;
    height: 500px; 
    background-color: rgb(0,0,0); 
    position: relative;
}
.Window-Top {
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(128,128,128); 
    background-image: -webkit-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -moz-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -o-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
    background-image: -ms-linear-gradient(bottom, rgb(167,167,167) 25%, rgb(208,208,208) 78%);
}
.Window-Bottom {
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgb(0,128,128);
}
.Window-Content {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: 0;
}
.Window-Content-Left {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(255,0,0);
}
.Window-Content-Right {
    width: 150px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(0,0,255);
}
.Window-Content-Content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 150px;
    right: 150px;
    background-color: rgb(0,255,0);
}