Маскируемся под таблицы

Проблемы всегда начинаются тогда, когда ты их меньше всего ожидаешь. Казалось бы что здесь такого сложного, создать двух-колоночный сайт, чтобы обе колонки были одинаковой высоты, но разного цвета.

Когда то, когда деревья были большими, а сайты верстали таблицами, такой вопрос даже не стоял. Но с приходом семантической верстки эта тема перестала быть тривиальной.

Как же решается этот вопрос? Javascript? Неет. Таблицы? Ни в коем случае. Есть один прием, который я использую уже довольно долго и я был удивлен, когда совсем недавно увидел на известном сайте A List Apart свежую статью, описывающую подобную технику. Почему ее не написали раньше?
Ну да не суть. Ведь решается все очень просто. Достаточно на секунду посмотреть на проблему незамыленым взглядом со стороны и ответ становится очевиден.

Отрицательный margin. Посмотрим что у нас есть в активе и как это работает.

У нас есть общий блок контейнер фиксированой ширины 760px. Внутри него еще два контейнера. Левый для контента - 560px, правый для меню - 200px.

Фишка в том, чтобы создать левый блок с заданой шириной в 560px, добавить справа border шириной в 200px и цветом, который мы хотим видеть фоном для меню, а потом наложить на этот бордер наш блок с меню.

HTML:

<body>
<div id="container">
<div id="left">
<h2>Here is a lot of content</h2>
</div>
<div id="right">
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</div>
</div>

Пока все просто, правда? Дальше будет CSS. Оба внутрених блока должны быть float:left, и иметь фиксированую ширину. У блока #left как мы сказали будет margin-right: 200px того цвета, который нам нужен, а у блока #right будет отрицательный margin, который в сочетании с float:left, позволит нам спозиционировать блоки в так как нам нужно.

CSS:

#container{
width:760px;
margin: 0 auto;}
#left{
width: 560px;
min-height: 500px;
float:left;
background: #FFFFFF;
border-right: 200px solid #9999FF;
}
#right{
width: 200px;
float:left;
color: #FFFFFF;
margin-left: -200px;
}

Есть один важный момент. У блока #left должна быть задана минимальная высота. Для Файрфокса и 7-ого Интернет Эксплорера это не проблема. Благо оба поддерживают min-height, а вот для IE 6 надо прописать height с помощью Star HTML хака:

* html #left{
height:500px;
}

В случае если контент по высоте будет больше чем 500px, то ИЕ6 проигнорирует css-правило и растянет блок. Что нам и нужно. Вот в принципе и вся грамота. Несколько строк кода и вопрос решен. Но мы пойдем дальше

Что если нам надо прижать какой-либо элемент, блок или картинку, к нижней части правого блока, а мы не знаем какова будет его конечная высота? Ответ будет тем же - отрицательный margin.

В коде, после блока #right добавим следующие строки:

<div id="inner">Here is bottom block</div>

А затем в CSS мы спозиционируем его таким образом: float:right, для того чтобы прижать его к правому краю, и отрицательный margin-top со значением равным высоте вставляемого блока.

#inner{
width: 200px;
height: 150px;
background: #99FFCC;
float: right;
color: #FFFFFF;
margin-top: -150px;
}

Теперь абсолютно не важно какой высоты будут оба блока, блок #inner будет всегда прижат к нижнему правому краю.

Посмотреть и забрать рабочий пример можно.

Ну а теперь ложка дегтя. Куда же без нее. В данном примере нельзя добавить повторяющееся изображение в background для правого блока, так как цвет мы задаем в border.

Существуют подобные решения для трех-колоночной верстки и для растягивающейся, но о них в следующий раз.

(проголосовали: 6, рейтинг: 5 из 5)

Загрузка ...

Рубрика CSS. Автор Curly Brace | 14 Февраль 2007

6 Комментариев »

1 +1
Спасибо большое А я использовал табличную верстку, там где приходилось, теперь же всё будет только div-ами.

Комментарий by Mo1ot0k — Февраль 14, 2007 @ 2:23 pm | Цитировать
2 +1
> Mo1ot0k

всегда пожалуйста а таблицы нужны только тогда, когда нужны таблицы на сайте и не более того.

Комментарий by neutrino — Февраль 14, 2007 @ 2:25 pm | Цитировать
3 0
Вопрос:
- Какие виды бывают у ? А также как изменить размер ?

Пожелания:
- Хочу увидеть статью о том как и кто нарезает макет, и в каком формате лучше сохранять нарезанные картинки.
- Было бы также очень не плохо увидеть каталог ссылок на сайты web 2.0, но только с действительно красивым дизайном.

Комментарий by Mo1ot0k — Февраль 14, 2007 @ 9:55 pm | Цитировать
4 —1
Вопрос:
- Какие виды бывают у li? А также как изменить размер ?

Комментарий by Mo1ot0k — Февраль 14, 2007 @ 9:57 pm | Цитировать
5 0
Это все конечно хорошо, но ИЕ6 еще никто к сожалению не отменил…

Комментарий by grank — Январь 12, 2008 @ 3:05 pm | Цитировать
6 +1
grank, пардон, что-то там заглючило, я уже и не помню почему. Все поправил, сейчас все ок.

Комментарий by neutrino — Январь 12, 2008 @ 11:53 pm | Цитировать