CSS & DIV problem

Problem je u tome što Internet Explorer drugačije handla padding na elementima.

Trenutno ti mogu samo reći kako ja to inače radim.

znači imam jedan <div id="wrapper"> koji je sadrži cijeli layout stranice.

Zatim prvo postavim divove ovisno o layoutu koji želim, ali bez padding. Baš zbog problema različitog prikaza. Znači samo divovi koji određuju granice ali nemaju nikakvog contenta.

<div id="wrapper">

    <div id="leftcontainer">
    </div>
   
    <div id="rightcontainer">
        <div id="maincontainer">
       
        </div>
    </div>

</div>

E sad... leftcontainer i rightcontainer su samo placeholderi za sadržaj. znači oni nemaju nikakav padding koji bi mogao pokravit izgled u IE-u ili firefoxu.

A onda unutar njega postavljaš divove koji nose sadržaj. Samo pazi na širine divova + padding + margine. Ako ti zbroj svega bude dobar, sve će ti izgledat isto u svim  browserima.

A evo i css za ovo. Samo to još upakuješ u html i body tagove i you're good to go..

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}

#wrapper {
width:900px;
height:90%;
margin:0 auto;
padding:0;
border:1px solid #333333;
}

#leftcontainer {
width:300px;
height:100%;
float:left;
position:relative;
left:0;
top:0;
border:1px solid #333333;
}

#rightcontainer {
width:585px;
height:100%;
margin:0 0 0 10px;
padding:0;
float:right;
position:relative;
right:0;
top:0;
border:1px solid #333333;
}

#maincontainer {
width:575px;
margin:0 auto;
padding:5px;
border:1px solid #333333;
}

Ako zapne, viči.. Nadam se da shvaćaš što želim reći..

A evo malo i škicni ovdje... http://www.w3.org/TR/CSS2/box.html

Ali tablice se pokušavaju izbacit iz izrade layouta web siteova. jer je puno fleksibilnije raditi sa divovima.

Takodjer ti IE ima problema sa marginama floatanih elemenata (npr ako imas neki div koji je float left i imas na njemu margin:NNpx... ) on ti to ne prikazuje u redu pa pokusaj u css u svaki element koji je floatan i koji ima margine i paddinge dodati liniju

display:inline;

u tvom slucaju bi trebalo sljakat...

I da, IE je dosta bugovit sta se tice prikaza floatanih elemenata... ali uvjek postoje neki workaroundi.

Pa fiksiraj sirinu diva pa ce ti samo ici u novi red???

Tnx na odgovorima, malo ću preformulirati pitanje kad nema razmaka je problem želim da mi lomi tekst kako ja hoću, a ne da ga lomi tamo gdje je razmak sukladno definiranoj širini.

A možeš probati prelomiti sami string pa će ti se ispisivati u novom redu, no opet to nije riješenje. Jer tebi treba nešto da ti lomi tekst ovisno o širini DIV-a u kojem se tekst nalazi, a ne o količini znakova u stringu.

Recimo, php funkcija wordwrap() ti lomi teks na određenom znaku u stringu...

Ili možda neko javascript riješenje...

MA znam, jasno mi je to... To je čisto onako nabačeno razmišljanje da malo čovjeku potaknem maštu. Možda naiđe na riješenje.. :D

E vidis, za ovaj tag uopce nisam znao da postoji... Nije bas da mi je trebalo nesto ovakvo ali dobro je znati.

Ali owerflow hidden ti znaci da sve sto izlazi iz podrucja tog diva (predug tekst, prevelika slika, drugi div) ti nece bit vidljivo, bit ce kao da ti je odrezano? Si siguran da to zelis?