CSS sloupcovy layout, dlouhy text roztahujici layout stranky

[Jey]

jedna se o stranky http://hanspaulka.wz.cz, pisu je v html 4.01, nicmene casem prepisu do xhtml
konkretne zde si otevrete odkaz s dlouhym clankem http://hanspaulka.wz.cz/index.php?article=1193384051

pouzivam minimalne upraveny klasicky sloupcovy layout, nacrtnu..



pricemz potrebuji aby se divy "left" a "right" roztahovaly do vysky(height) podle delky jejich obsahu. toho jsem docilil pomoci pouziti css vlastnosti min-height:723px; a _height:723px (coz je hack pro internet explorer, ktery nezna parametr min-height). to ale funguje ve firefoxu, v exploreru, ale uz ne v opere. viz obrazek.. jine reseni neznam.



styl vypada nejak takhle:

body {
background-color:#000000;
}
#page {
background-color:#5e82ac;
width:758px;
min-height:838px;
_height:838px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
}
#top {
background-color:#426082;
width:758px;
height:90px;
}
#middle {
background-color:#5e82ac;
min-height:723px;
_height:723px;
width:748px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
}
#left {
background-color:#385c6c;
width:558px;
min-height:723px;
_height:723px;
float:left;
}
#right {
background-color:#385c6c;
width:185px;
min-height:723px;
_height:723px;
float:right;
}
#bottom {
background-color:#426082;
width:758px;
height:15px;
}

div #middle je vylozene pomocny a pokud by se ho slo zbavit, rad to udelam. nicmene potrebuji dosahnout zelene vysrafovaneho odsazeni. obsahem divu #middle je krome #left a #right i dalsi div, ktery ma pouze style="clear:both" .. napada me jestli je spravne umisteny?

dal se chci zeptat.. chapu to spravne ze css vlastnost .. top = margin-top? to same pro left?
a jeste jedna otazka.. jakou ma objekt defaultne nastavenou vlastnost position? mel jsem za to ze relative ale nejak mi to nesedi.. edit: aha tohle uz jsem nasel, position je defaultne nastaveno static.

[l_iNu$]

dal se chci zeptat.. chapu to spravne ze css vlastnost .. top = margin-top? to same pro left?

Chápeš špatně, margin je vnější okraj elementu(tedy odstup od ostatních elementů), kdežto vlastnosti left, top, right, bottom určují pozici elementu závislou na vlastnosti position (absolute, relative...)

[Jey]

Chápeš špatně, margin je vnější okraj elementu(tedy odstup od ostatních elementů), kdežto vlastnosti left, top, right, bottom určují pozici elementu závislou na vlastnosti position (absolute, relative...)

ano, rozumím. původně jsem chtěl napsat za určitých podmínek. za určitých podmínek lze obojí použít k dosažení stejné věci. právě jsem přemýšlel, zda by mi nepomohlo zrušit celý #middle a namísto toho dát position:relative pro #left a nastavit mu left:5px a pro #right dát také position:relative a nastavit mu right:5px; pak už jen vymyslet onu horizontální mezeru.. například pro #bottom nastavit position:relative a top:5px; a pak dat jeste top:5px pro left i right. zda by toto fungovalo? inu nápady mám, ale nemám ověřenou funkčnost, proto se ptám, než se do něčeho pustím. v momentálním stavu to bohužel není ono.

[visby]

skus dat za tie dva float divy toto:

<hr style="clear: both; display: none;"/>

casto mi to pomohlo, ked som kombinoval float elementy a normalne...

[Jey]

visby: jasne to funguje, ale pouze pokud nepouziju display, ale dam namisto toho visibility:hidden. a musim nastavit i parametry te cary, protoze treba explorer ji da rozmery podle sveho. takze to opet nevypada vsude stejne. toto reseni si ponecham v zaloze. verim, ze by to slo vyresit obratneji.

[Rainbow]

Mozno by sa dal pouzit display: table a display: table-cell. To som na nejakom webe pouzil, ked som chcel bocny panel roztahovat do vysky. Akurat to nefunguje v MSIE, tak na to som tam pridal nejaky hack.