Верстка 3 колоночного, резинового макета.+прижимаем футер

Категории:HTML-верстка, Для начинающих
Теги: 3 колонки, css, html

Опубликовано:
31-05-2010

верстка сайта в 3 колонко Ну вот, наконец-то я вернулся к теме моего блога HTML-верстке. Что-то понесло меня на блоггинг =). Хотя вышло даже не плохо…Получил первый раз для своего блога больше 130 посетителей за сутки. Потом меня надоумило написать про болезни людей, которые за компьютером много сидят… Но вот, наконец-то, я образумился и вернулся к родной тематике. Эта статья повествует о следующем:

Как сделать 3 колонки с помощью CSS

Как сделать резиновый 3-х колоночный макет

Как прижать footer к низу окна браузера, даже если на странице очень мало контента.

Знаю, тема уже раскрыта =) но, повторение – мать учение!Начнем со структуры HTML:

1
2
3
4
5
6

<div id="container">
<div id="left">Левый сайдбар</div>
<div id="right">Правый сайдбар</div>
<div id="center">Контент</div>
</div>
<div id="footer">футтер</div>

Далее перейдем к css. Здесь не все так просто как в html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

html, body{
margin:0px; padding:0px; height:100%; width:100%;
}
#container{
position:relative;
margin:auto 0 -50px; \*ставим блок по середине и отсчитываем -50px высоты футтера*\
height:100%;
min-height:100%;
height:auto !important;
}
#left{
position:relative;
width:200px;
height:100%;
min-height:100%;
height:auto !important;
background-color:#999999;
float:left;
}
#right{
position:relative;
width:200px;
height:100%;
min-height:100%;
height:auto !important;
background-color:#999999;
float:right;
}
#center{
background-color:#CCC;
height:100%;
min-height:100%;
height:auto !important;
width:auto;
}
#footer{
position:relative;
clear:both;\*очистка от float с обеих сторон*\
width:100%;
height:50px;
background-color:#9999CC;
border-top:1px solid #333333;
}

Вот и вся магия =). Этот пример очень хорош в использовании. Теперь Вас не затруднит создать 3 колонки в Вашей верстке и при это сделать кроссбраузерный резиновый макет с прибитым к низу окна браузера футтером. Пример можно посмотреть здесь!

Если Вам понравилась статья и Вы хотите следить за обновлениями в блоге, то подписывайтесь через RSS, становитесь моим фолоувером в twitter. Так же, возможно, Вы хотите разместить постовые или любые другие виды рекламы. В таком случае пишите мне на ICQ:451240340

Если Вы хотите чтобы Ваше строительство проходило на должном уровне, обратитесь в МГБТЭ! Они проведут надзор за строительством Вашего проекта наилучше.

Вы знаете где будет проходить Евро-2012 в Донецке? Все новости об этом и многом другом на сатей города Донецк по адресу – http://donetsk.prostogorod.com/. Узнай свой город лучше вместе с сайтом!

masterix.com.ua

HTML верстка макетов любой сложности