CSSing – Блог про CSS и все что с этим связано. Новые приемы и технологии и т д.

Как я делаю две колонки

Мне кажется не лишним будет поделиться несколькими, для бывалых кодеров конечно очевидными, методами. Немало об этом написано - но никогда не лишне навести порядок в голове. Разумеется все без таблиц.
Очевидно - если вы умеете делать две колонки - ничего не стоит сделать их тремя - просто разбив одну из них опять на две. И так далее...

Простые две колонки через CSS

1. <div id="wrap">
3. <div id="main">
4. </div>
6. <div id="side">
7. </div>
9. </div>

1. #wrap{
2. width:700px;
3. }

FLOAT для двухколоночного дизайна

1. #main{
2. float:left;
3. width:500px;
4. }
5. #side{
6. float:right;
7. width:200px;
8. }

1. #main{
2. float:left;
3. ...
4. #side{
5. float:left;
6. ...

1. #wrap{
2. overflow:hidden;
3. }

1. #main{
2. float:left;
3. ...
4. #side{
5. margin-left:500px;
6. ...

Из недостатков float методов - при переполнении одного из блоков - колонка может сползать(в ИЕ конечно). Но с этим можно и нужно бороться.

• Internet Explorer and the Expanding Box Problem

абсолютное позиционирование

1. #wrap{
2. position:relative;
3. }
4. #main{
5. position:absolute;
6. left:0;
7. width:500px;
8. }
9. #side{
10. position:absolute;
11. left:500px;
12. width:200px;
13. }

Конец

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

В любом случае всегда рад слышать уточнения, советы, Ваши мнения и техники!