Keskustelu: Nettisivujen teko: Ongelma näytön levyisen layoutin tekemisessä

Olen tekemässä ensimmäistä kunnollista leveää layouttiani ja en millään keksi miten saan sivupalkeista 220px leveät ja keskipalkkiin lopun leveyden.

Tässä on kyseinen kohta css-tiedostosta:

/*Tämän sisällä kaikki 3*/
#keski {
width: 100%;
background-color: #DDDDDD;
float: left;
}
/*Vasen sivupalkki*/
.vasen{
float: left;
width: 220px;
padding-left: 15px;
padding-right: 15px;
}
/*Keskipalkki johon tahtoisin venyvyyden :D*/
.keski{
float: left;
width: 100%-500px;
min-width: 500px;
margin-left:10px;
}
/*Oikea sivupalkki*/
.oikea{
float: right;
width: 220px;
padding-left: 15px;
padding-right: 0px;
}

Tässä sivu:
XHTML
CSS

Keskeltä floatit pois ja käytät marginia

margin-left: vasemman width + padding + margin
margin-right: oikean width + padding + margin

En tiiä mitä IE sanoo ku testasin vaa firebugilla nopeeta

Meinaat näin?

.keski{
margin-left: 250px;
margin-right: 250px;
width: 100%;
margin-left:10px;
}

Nyt opera ja FF laittavat keskipalkin sivupalkkien alle, koko sivun leveyksisenä ;(

Width pois siitä, se on automaattisesti koko loppu sivun levyinen kun siinä on vain margin. Muista esitellä koodissa sivupalkit siis ennen keskiosaa. Vastaavasti sivupalkeissa pitää olla määritettynä leveys, sekä palkki laitettuna floatilla kelluvaksi. Jos haluat palkin/keskiosan olevan koko sivun korkuinen myös silloin kun toinen on ennaltamääritettyä korkeampi (taustoissa haittaa etenkin), laita sekä palkki ja keskiosio näytettäväksi taulukkosoluina display: table-cell; css määrittelyllä.

Niin tein tuolla kun tein tuon sivupohjan.

Ja tuossa koodissa on määritelty kahteen kertaan margin-left. Toinen kumoaa aikaisemman jotenka jos haluat 260px marginia kirjoita sinne myös 260px. Tai laita padding-left: 10px;

Nyt toimii, kiitos :)

Tuo 2x margin-left oli kyllä typo :/