CSS three column layout, liquid center, no left-margin!
- by moontear
Hi,
I am all in favor of CSS based layouts, but this one I just can't figure out. With a table it is oh-so-easy:
<html>
<head><title>Three Column</title></head>
<body>
<p>Test</p>
<table style="width: 100%; border: 1px solid black; min-height: 300px;">
<tr>
<td style="border: 1px solid green;" colspan="3">Header</td>
</tr>
<tr>
<td style="border: 1px solid green; width: 150px;" rowspan="2">Left</td>
<td style="border: 1px solid yellow;">Content</td>
<td style="border: 1px solid blue; width: 200px;" rowspan="2">Right</td>
</tr>
<tr>
<td style="border: 1px solid fuchsia;">Additional stuff</td>
</tr>
<tr><td style="border: 1px solid green;" colspan="3">Footer</td></tr>
</body>
<html>
Left is fixed width
Right is fixed width
Content is liquid
Additional stuff sits beneath content
Now here is the important part: "Left" may not exist. Again this is easy with the table. Delete the column and "Content" expands. Beautiful.
I have looked through many examples (and "holy grails") of liquid and table less three-column CSS based layouts, but I have not found one which is not using some kind of margin-left for the middle column ("Content"). Any margin-left will suck once "Left" is gone as "Content" will just stay at it's place.
I'm just about to switch to old school table based layout for this problem, so I'm hoping someone has some idea - I don't care about excess markup, wrappers and the like, I would just like to know how to solve this with plain CSS. Btw: look at how easy equal height columns are...
Cheers
PS: No CSS3 please
