Я не согласен с Домиником Роджером: фреймворк был бы огромным излишним для чего-то такого простого.Конечно, у вас должна быть какая-то базовая сетка, но вам не нужны все 960.gs, план или любая другая «структура», которая просто загрязняет вашу разметку ненужными классами.
Каркасы требуют использованияпредопределенных имен классов, таких как .grid_2, .grid_12 и т. п., вечно связывающих вас именно с этим макетом.Этот тип побеждает разъединение HTML и CSS: при редизайне вам потребуется изменить как таблицу стилей, так и разметку, которая довольно быстро выходит из-под контроля.Я вообще просто не рекомендовал бы это.
Ваши требования довольно просты и могут прекрасно работать без фреймворков.По сути, все, что вам нужно сделать, это добавить еще один контейнер в вашу разметку (также вы должны использовать id вместо class, если только один из этих элементов может существовать на любой данной странице):
<div id="container">
<div id="sidebar">
</div><!-- #sidebar -->
<div id="main">
<div id="content">
</div><!-- #content -->
<div id="subscript">
</div><!-- #subscript -->
</div><!-- #main -->
</div><!-- #container -->
(Я использую эти комментарии, чтобы иметь возможность сопоставлять закрывающие теги с их аналогами, не стесняйтесь их опускать.)
Теперь все, что вам нужно сделать, это разместить элементы в соответствии с вашими потребностями:
#container {
overflow: hidden; /* don't collapse (floated children) */
width: 960px; /* fixed width for entire site */
}
#sidebar {
float: left; /* floating to the left in #container */
height: 200px; /* fixed height */
width: 320px; /* fixed width */
}
#main {
float: right; /* floating to the right of #container */
overflow: hidden; /* don't collapse (floated children) */
width: 640px; /* width of #container - width of #sidebar */
}
#content {
/* you shouldn't even need rules for this one */
}
#subscript {
float: left; /* floated to be only as wide as needed for content */
}
div s являются блочными элементами, поэтому, если они не являются плавающими или имеют фиксированную ширину, они занимают все доступное пространство (см. #content).
Теперь плавающие элементы с другой стороныне имеет высоты, поэтому их родительский контейнер просто свернется (т.е. вы не сможете заполнить пустые области цветом #container { background: red }. Чтобы предотвратить свертывание #container, требуется overflow: hidden.
По сути, каждый раз, когда вы перемещаете элемент где-то на вашей странице, его родительский контейнер должен иметь overflow: hidden (см. #container и #main).
Очевидно, вам придетсяизменить размеры согласнонг к вашим потребностям.