[HTML/CSS] Bizar block probleem

[aCCuReRaS]

Ik heb volgende structuur:

<div id="main">
<div id="content">
<div id="content-header"></div>
<div id="contentarea"></div>
</div>
<div id="menu"></div>
</div>

main heeft een bgcolor meegekregen, content block staat links, menu rechts dmv floating.
aangezien mijn content altijd langer zal zijn dan de menu, heb ik de main div zelfde bgcolor meegegeven als de menu div, om ervoor te zorgen da de menu block er altijd even lang uitziet als de content block.

nu het vreemde is, de main div stopt waar de text in de menu stopt. en loopt dus niet door tot de onderkant van de content block

verwarde uitleg misschien, maar hier staat alles online:
http://www.kumulus.be/dev/

iemand die mij kan zeggen wat ik fout doe? ik weet het namelijk echt niet meer ^^

*update*
in Internet Explorer 6 wordt het correct weergegeven
Firefox loopt de kleur niet door, evenals opera (Version 8.0 Build 7561)

[ Voor 18% gewijzigd door aCCuReRaS op 03-05-2005 13:01 . Reden: browser update ]

[Fuzzillogic]

Ik zie hier (Opera 8, FF 1.0.3) het probleem niet. Alleen die ene browser met 4 jaar achterstallig onderhoud maakt er een zooitje van.

[aCCuReRaS]

de kleur loopt ook in opera niet door

[André]

Ik zie het probleem ook niet? Is het de bedoeling dat dat groene stuk aan de rechterkant tot aan de onderkant moet komen ofzo?

[aCCuReRaS]

ja

[André]

Zet dan onder je content div dit neer:

code:

<br style="clear: both" />

[aCCuReRaS]

ik heb het er gezet, maar het resultaat is niet wat het moet zijn... (check url voor update)

[André]

aCCuReRaS schreef op dinsdag 03 mei 2005 @ 13:15:
ik heb het er gezet, maar het resultaat is niet wat het moet zijn... (check url voor update)

Waarom niet dan? Zo wil je het toch? En zo niet, wat wil je dan precies bereiken?

[aCCuReRaS]

wel, het is de bedoeling dat die menu bovenaan blijft staan, nu staat die onderaan de content...

[André]

http://www.alistapart.com/articles/fauxcolumns/

[chris]

Waarom gebruik je niet gewoon tables voor je layout? Aangezien je een groot deel (met name de navigatie) in Flash doet, heeft het gebruiken van css voor je layout eigenlijk geen voordelen. Je site zal op deze manier echt niet toegankelijk worden, en wat jij wilt bereiken is volgens mij veel makkelijker via tables te doen.

Zo ziet je site er in links uit:

[aCCuReRaS]

omdat ik een jaartje geleden ben overgestapt op css only layouts
dit is de eerste keer dat er zo'n probleem optreed. het moet gewoon werken zo

en ivm links, wees gerust, er komt nog een navigatie voor text browsers

[aCCuReRaS]

om deze thread nuttig af te sluiten, hier de oplossing:

#clear {
clear: both; /* extend height of #main to longest column */
height: 1px;
overflow: hidden; /* prevent IE expanding the container */
margin: 0; /* keep flush with surrounding blocks */
}

zet die css code in de css file, en voeg onder de menu div een nieuwe div toe:
<div id="clear"></div>

[T-MOB]

aCCuReRaS schreef op dinsdag 03 mei 2005 @ 13:56:
om deze thread nuttig af te sluiten, hier de oplossing:

Voor het clear-probleem heeft Anne al eens een CSS-only oplossing aangedragen. Gewoon zo:

Cascading Stylesheet:

#main {
 overflow: auto; //dit is voldoende volgens de CSS spec
 _height: 1%; //en zo snapt IE het ook \0/
}

[AxiMaxi]

T-MOB schreef op dinsdag 03 mei 2005 @ 14:07:
(...)

Cascading Stylesheet:

{ // knip
 _height: 1%; //en zo snapt IE het ook \0/
}

Please explain: waarom dat underscoortje voor height?

[Verwijderd]

Dan leest alleen IE de property in.

[BtM909]

AxiMaxi schreef op woensdag 04 mei 2005 @ 10:46:
[...]

Please explain: waarom dat underscoortje voor height?

Zodat alleen IE deze regel oppakt

[Verwijderd]

T-MOB, CSS kent alleen /* gevolgd door */ commentaarstijl. Al het andere is nogal, euh, fout.