Не могу получить две колонки для работы - PullRequest
Новая
       22

Не могу получить две колонки для работы

1 голос
/ 16 мая 2011

Я пытаюсь сделать простой макет из двух столбцов, но он кажется сложнее, чем я думал ..

Требуется:

  • Фиксированная ширина 300px, левый столбец
  • Правый столбец, который заполняет остальную часть страницы - независимо от размера окна
  • Оба div столбца должны касаться нижней части страницы

Бит у меня возникли проблемыс третьим пунктом пули, если бы я использовал float, то правый столбец всегда был бы перенесен под левый столбец, и я не смог бы заставить их обоих находиться на одном уровне с нижней частью страницы!

И я подумал, чтонеобходимо плавать в левом столбце, так как установить правое значение 100% -300px невозможно.

Есть идеи?Спасибо!

Ответы [ 2 ]

0 голосов
/ 16 мая 2011

Попробуйте - протестировано с IE6 + и работает. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    html, body {height:100%;position:relative;margin:0;padding:0;}
.side {float:left;width:300px;height:100%;background:red;}
.main {margin-left:300px;background:blue;height:100%;}
    </style>
</head>
<body>
<div class="side">
       side content
</div>
<div class="main">
    content
</div>
</body>
</html>
0 голосов
/ 16 мая 2011

CSS: 

#main, * html #left, * html #right { display:inline; height:100% }
#main { display:table }
#left, #right { display:table-cell }
#left { width:300px }

* html #left для IE, поэтому он вынужден использовать display:inline; height:100%.IE, кажется, не поддерживает display:table-cell.

HTML: 

<div id="main">
    <div id="left"></div>
    <div id="right"></div>
</div>
...