How to convert this table layout to div layout?

Question

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

I am trying to execute 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/ . at http://jsfiddle.net/blineberry/juckh/7/ (but with a div)

The reason this is not arbitrary is because the whole form can be dynamically resized using js, and I want the center to expand and contract as needed.

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

Answer 1

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

As you can see, when setting width and height of .Window everything changes.

This will work in IE7 + and in all modern browsers.

This clearly does not work in IE6. If you need to support IE6, you can use JavaScript only for IE6, or you can stick with <table> . If you want to support IE6, it's worth the 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); } 

Answer 2

I was recommended by a friend to use a div layout,

First of all: "Tables of Evil" is a myth. If the table works for you, there is no reason to change the layout.

but I can't get it to work.

Not surprisingly :-) There are various ways to model a table with a div , but this is not trivial. Perhaps the same people who say “don't use tables” should come up with simpler and more reliable ways to replace tables with CSS. CSS can do a lot, but it is very difficult to create multiple elements with the same height in CSS without using JavaScript.

If you still want to try (and I suggest you do this, you can learn about CSS limitations), do an online search for a “CSS Column Layout”.

Here's a good article to get you started: Layouts of multiple columns go out of the box

Answer 3

You can use the display:table property to do this

Check out this example.

http://jsfiddle.net/qPgVx/17/

OR

If you have a fixed height, write like this:

http://jsfiddle.net/qPgVx/20/

Answer 4

Use floating divs for middle 3 divs.

 .Window-Content-Left { ... float:left; ... } .Window-Content-Right { ... float:right; ... } 

Remember to clean the floats if necessary:

 clear: both; 

Answer 5

Look here or here .
Basically, they use the margins in the middle of the <div> , and then set the sidebars on the margins with great care to view the same height.

Here is jsfiddle

Answer 6

Assuming all measurements are corrected, you can do something like this:

http://jsfiddle.net/qPgVx/9/

You basically need to float all three middle divs and use another div that uses clear: both. You can find more about this here.

EDIT : Ok, you need a fluid layout. The best solution I found for this is the following example:

http://www.alistapart.com/d/negativemargins/ex5.htm

from this article:

http://www.alistapart.com/articles/negativemargins/

The problem with the middle column not expanding to 100% of the height is common, and the method I use to solve it is called “artificial columns”. Basically you use a background image or a wrapper div that mimics the background color of your middle column. The above article describes that two.

More on fake columns:

http://www.alistapart.com/articles/fauxcolumns/