Question

I am creating a table which I want to have a top part, middle part, and a bottom part. The middle is also divided into a left, center, and right. I want it so that the only thing that ever gets larger or smaller is the middle’s center. I am encountering a few problems with this however:

1. The table isn’t filling the entire height;
2. The Center-Left and Center-Right aren’t holding their widths

I have created a JsFiddle so that you can see what I mean.

http://jsfiddle.net/CGv2Z/

Thanks!

Answer 1

Ignoring the fact that this is a table and you appear to be wanting to use it for layout (hint: You probably shouldn’t be), and some other problems.

There were 2 primary problems.

1. You had every element under .Window set to display: block; and width: 100%. Remove that.
2. You have the width of .Window-Content-Content set to 100%, which is 100% of it’s parent, which isn’t what you want. You have left and right set to specific widths, table cells will then naturally fill in the extra width. if the parent table has a width set on it.

http://jsfiddle.net/CGv2Z/10/