CSS three column layout, liquid center, no left-margin!
Posted
by moontear
on Stack Overflow
See other posts from Stack Overflow
or by moontear
Published on 2010-06-14T20:31:55Z
Indexed on
2010/06/14
20:42 UTC
Read the original article
Hit count: 290
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
© Stack Overflow or respective owner
