Я полностью поддерживаю макеты на основе CSS, но этот я просто не могу понять. Со столом это так просто:
<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>
- Слева фиксированная ширина
- Право - фиксированная ширина
- Содержимое жидкое
- Дополнительные материалы находятся под содержимым
Теперь вот важная часть: «Слева» может не существовать . Опять же это легко с таблицей. Удалите столбец и «Содержание» развернется. Красивая.
Я просмотрел много примеров (и «святых Грааля») жидкостных и табличных трехколоночных макетов на основе CSS, но я не нашел такого, в котором для среднего столбца не использовался какой-нибудь поле слева («Контент») , Любое оставленное поле будет сосать, как только «Left» исчезнет, так как «Content» просто останется на своем месте.
Я просто собираюсь перейти к старой школьной раскладке для этой проблемы, так что я надеюсь, что у кого-то есть идея - меня не волнует избыточная разметка, обертки и тому подобное, я просто хотел бы знать как решить это с простым CSS. Кстати: посмотрите, насколько легко столбцы одинаковой высоты ...
Приветствия
PS: без CSS3, пожалуйста