<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#container { max-width:960px; width:100%; min-width:400px; overflow:auto;}
#aside { height:300px; width:40%; min-width:150px; float:left; background-color:grey; }
#primary { height:300px; width:20%; max-width:200px; float:left; background-color:red; }
#secondary { height:300px; width:40%; min-width:150px; float:right; background-color:grey; }
</style>
</head>
<body>
<div id="container">
<div id="aside">Leftmost content</div>
<div id="primary">Primary content</div>
<div id="secondary">Secondary content</div>
</div>
</body>
</html>
Пару вещей об этом макете:
- я определил высоту и фона только для отображения.
- Overflow auto находится на содержащем элементе, чтобы очистить поплавки; хотя вы также можете использовать более четкий div.
- Контейнер имеет ширину жидкости, но имеет максимальную длину при 960. Я выбираю это число произвольно, но это хорошая идея, чтобы максимизировать ширину жидкости до того, как линии текста станут слишком длинными.
- Если вы храните жидкость в контейнере, макет будет сломать, если окно просмотра становится достаточно маленьким. EDIT: Я добавил минимальную ширину 400 пикселей в контейнер, это должно устранить проблему.
Кроме того, я бы взглянул на http://www.alistapart.com/articles/holygrail/. Хотя это статья, в которой подробно описывается расположение трех столбцов с фиксированной жидкостью, я считаю, что есть несколько идей, которые вы могли бы использовать для улучшения моего макета, если бы вы были так склонны.
Это может зависеть только от того, насколько совместим с браузером. –
Последние версии IE, Firefox, WebKit и Opera. – NVI