CSS + HTML Template (3 колонки)
HTML код:

<div class="header"></div>
<div class="content">
<div id="left">
<div style="padding:10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec posuere aliquet leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse enim. Mauris et enim vitae magna suscipit auctor. Morbi justo risus, vestibulum dapibus, sagittis eget, condimentum vel, nunc. Duis dictum dictum orci. Cras tristique sem ac orci. Mauris rutrum mauris vitae lorem. Etiam at neque. In est turpis, viverra sed, pretium a, fermentum eget, eros. Curabitur ut risus. Aliquam magna.</div>
</div>
<div id="center">
<div style="padding:10px;">Nullam bibendum felis eget velit. Sed faucibus urna a dolor. Suspendisse vitae enim vitae dui pulvinar sagittis. Vestibulum nisi. Etiam convallis dui vel mauris. Nunc eu felis id felis tincidunt euismod. Praesent pulvinar ipsum non tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam adipiscing, odio ut condimentum ornare, nibh eros fermentum diam, ut consequat mauris massa suscipit nulla. In tincidunt. Sed lacinia tellus non enim.</div>
</div>
<div id="right">
<div style="padding:10px;">Vivamus tortor. Etiam varius elit in odio. Curabitur tempus odio vel augue. Nulla vel mi. Praesent tristique erat sit amet lorem. Praesent id felis elementum nisl porttitor dapibus. Aliquam eleifend orci nec lorem. Vivamus vulputate. Integer et nulla. Donec commodo sagittis magna. Praesent at libero et ligula placerat ullamcorper. Aliquam imperdiet.</div>
</div>
</div>
<div class="footer"></div>
</div>


header - лентата намираща се над тези колонки
left - лява колона
center - централна колона
right - дясна колона
footer - лентата намираща се под тези колонки
style="padding:10px" - показва отстоянието на текста или елемента от краищата на елемента, в който се намира. Не е задължително.

CSS код:

/*Header*/
.header {
position:absolute;
margin-bottom:auto;
margin-left:auto;
margin-right:auto;
margin-top:50px; (тук задавате разстоянието, което ще дели най-горната част на сайта от самото начало на тази лента)
width:540px; (широчината на лентата)
height:20px; (височината на лентата)
background-color:#CC99CC; (цветът на лентата)
}

/*Content - Цялата централна част без нейните деления*/
.content {
position:absolute;
margin-top:71px;
width:540px;
height:530px;
background-color:#FFFFFF;
}

#left {
position:absolute;
float:left; (това показва в коя страна ще соти колоната)
width:120px;
height:530px;
border-right:1px dashed #666666; (нейната рамка)
}

#center {
position:absolute;
float:none;
margin-left:120px;
width:300px;
height:530px;
}

#right {
position:absolute;
float:right;
margin-left:420px;
width:120px;
height:530px;
border-left:1px dashed #666666;
}

/*Footer*/
.footer {
position:absolute;
margin-top:602px;
width:540px;
height:20px;
background-color:#CC99CC;
}


ДЕМО

Автор: [PoD]MaTRiX

/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:19 22-07-2011
Полезен урок.
1