Vrijeme je da počnemo pisanjem css-a, ali korak po korak. Prvo ću vam napisati kod za divove, neću ga previše objašnjavat, pojasnit ću samo važnije stvari.
body{
font-family: Arial;
font-size: 13px;
line-height: 1.2em;
}
#main {
width: 900px;
margin: 10px auto 10px auto;
border: 1px solid #000;
}
#header {
width: 100%;
height: 100px;
background: #e5e4e4;
border-bottom: 1px solid #000;
}
#container {
width: 100%;
margin: 0px;
padding: 0px;
background: url('razdvajanje.gif');
background-repeat: repeat-y;
background-position: 259px 0px;
}
#left {
width: 259px;
float: left;
padding: 5px;
margin: 0px;
}
#right {
width: 500px;
float: left;
padding: 5px;
margin: 0px;
}
#popravak {
display: block;
clear: both;
height: 0px;
}
#footer {
border-top: 1px solid #000;
background: #e5e4e4;
text-align: center;
}
Jedan od najvažnijih, a možda i najvažniji, dio koda je onaj u kojem pridodajemo svojstva divu popravak. Taj nam div sa svojim svojstvima kako bismo spriječili lijevi i desni float ispod divova lijevo i desno. Njime ćemo spriječiti raspadanje cijele stranica, pa su sva tri svojstva, koje div sadrži, od presudne važnosti.
Ostatak koda služi samo za ukrašavanje. Slika koja je umetnuta u div container služi kao granica između stupaca. Ono na što, također, trebate paziti je veličina stupaca koju postavljate i veličina paddinga i/ili margina. Zbroj širina dvaju divova i njihovih eventualnih paddinga i margina mora biti manji ili jednak širini stranice, odnosno diva container. U protivnome će se stranica također raspasti, tj. desni div će doći ispod lijevog.
više na pcchip.hr