CSS: combining fixed and variable length DIV's

[velcro]

Vec se 1 cijeli dan igram s ovim i polako sam uvjeren da nece uopce biti moguce rijesiti bez tabela, al evo da postavim problem pred cijenjenu naciju pa da vidimo dal se nadje koja pametna glava

Problem je jednostavan - zelim imati 3 DIVa u bodyu.

1) je header sa fixnom visinom u pixelima i 100% sirinom
2) ispod headera s lijeve strane je meni nekakav s fixnom sirinom u pixelima i visinom da popunjava ostatak browser viewa
3) ispod headera s desne strane (pokraj menija) je content dio koji po visini i sirini treba popunjavati ostatak prostora u browseru (viewa)

Zanimaju me samo 'prava' cross-browser rjesenja tj. stvar s apsolutnim divovima koji se preklapaju pa se kao paddingom pomice content ne dolazi u obzir jer bi se unutar ta 3 glavna diva trebalo zavisno pozicionirati ostale neke child elemente.

Svaka pomoc je dobro dosla!

[PaNtHeR]

Code:

body,div,p,h1,h2,h3,h4,h5,h6,ul,li { margin:0; padding:0; border:0; } #menu {   width: 100px; float:left; background-color:#CCCCCC; } #header { background-color:#333333; color:#FFFFFF; height: 54px;} #footer { background-color:#333333; color:#FFFFFF;} #content { margin-left: 100px; height:1%;} <!-- ovaj height 1% je zbog IE --> #afterfloat { clear:both;} #container {background-image:url(css/images/fc.gif); background-repeat:repeat-y;} <div id="container"> <div id="header">header</div>   <div id="menu">menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>   <div id="content">     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>      </div>   <div id="afterfloat"></div>   <div id="footer">footer</div> </div>

Ajde vidi jel ti ovako sljaka...

Jedini problem ce se desit kad kolicina teksta u content divu prijede visinu menua, a tada uskace onaj gif u containeru koji je zapravo 100px sirok (ili koliko je vec sirok menu), pravokutnik.

Ajde probaj jel to to pa javi...

[velcro]

Ne, ovo tvoje se rasteze samo za toliko koliko contenta ima u meniju tj. ne rasteze se preko cijelog ekrana u browseru. Ja zelim da mi content i meni imaju visinu 100% ekrana umanjenu za visinu headera.

Mozda je jednostavniji opis problema s samo 2 DIVa - recimo da imas gornji i donji div (znaci pozicionirani vertikalno). Oba DIVa su 100% sirine browsera, a sto se tice visine - recimo gornji ima visinu u pixelima (npr. 200px), a donji treba popuniti svu preostalu visinu ekrana u browseru (tj. 100% - 200px). Tj. taj donji treba biti liquid ili variable ili kak god da ga zovem.

Thnx na odgovoru svejedno!