Div u % problem

Pravim jedan sajt i zelim da mi bude dobro prilagoden za sve vrste ekrana pa sirinu diva izrazavam u %…Trebaju mi 3 diva po 20 % 60% i 20% na sirinu od 1500px, medutim prva dva mi se fino poredaju a treci pobjegne ispod ostala dva (iako sam ga float left). Moze li mi itko pomoci ?

Evo primjer gdje mi nastaje greska: css (http://pastebin.com/rJZKxdAk)
index(http://pastebin.com/PFzW7XMx)

Vjerojatno imaš padding definiran unutar 3 diva osim širine, pa ti je širina zapravo veća nego što si stavio width. Znači ako ti je padding na divovima: 0 5% 0 5%, onda su ti širine divova 10% 50% 10%.

div{
padding:0 5% 0 5%;
width:10%;
}

stavio sam i padding i marigine na 0.

to ti je zbog tog bordera od 2px ili ga ukloni skroz ili stavi box-sizing:border-box

Pa valjda zbog bordera

Pa zar border ne ulazi u postotak ??

ma kakvi,na w3schools i malo pogledaj kako funkcionira box-model

border ti je izvan contenta

postoji li neki nacin da ukljucimu postotak i border i padding, da mi sve zajedno racuna ?

stavi * {box-sizing:border-box;} na vrh css fajla i stavi vendore -webkit- -moz- itd ako ces podrzavat ostale preglednike

Nestane mi treci div…

sta nije ti stao ? jesi stavio prefixe,nije to jos bas najbolje podrzano pa moras stavit -webkit- -moz- ovisno koji preglednik koristiš.

Evo tocan kod:

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.kolumna {
   width: calc(60% - 2px);
}

Ovih 2px zamijeniš s tim koliki ti je border i to je to.
Koristi prefixe -moz- i -webkit- da pokriješ Firefox i Chrome. Opera Mini ovo ne podržava.

Detaljnije, posjeti ovaj link:

1 Like

To sam trebao milijon puta…i tražio kak rješiti probleme koji traže ovakvo rješenje…i još nikako nisam naišao da je moguće raditi taj calc između postotka i pixela. Konačno :smile: