[CSS] Div evenhoog laten zijn als hoogste van 2 nested divs

[Sgrovert]

Ik ben een design aan het maken, waarvoor ik 3 divs gebruik. Een als border om de andere 2 heen, en de andere twee als 2 kolommen.

Ik heb de divs op deze manier staan:
<div id="frame">
<div id="menu">
Menu
</div>
<div id="content">
content
</div>
</div>

Nu zou ik graag hebben dat de hoogte van frame evenhoog is als de hoogste van menu en content. Echter is hij op het moment altijd evenhoog als content. Wie weet wat ik fout doe?
http://www.student.tue.nl/h/r.l.w.lahaije/zooi/test2.html

[Technicality]

Cascading Stylesheet:

#frame
{
 clear:both;
}

Dit is wel erg basic hoor, ik zou eens zoeken op google naar 2 column layout en dergelijke zoektermen. Ook hier op GoT is veel te vinden

[Victor]

Voeg overflow: hidden toe aan de ruleset van #frame.

En aangezien dit in IE alleen werkt als het element layout heeft, ook height: 1%

[mithras]

Technicality schreef op zondag 03 december 2006 @ 21:01:

Cascading Stylesheet:

#frame
{
 clear:both;
}

Dit is wel erg basic hoor, ik zou eens zoeken op google naar 2 column layout en dergelijke zoektermen. Ook hier op GoT is veel te vinden

En dat is dus een oude en lelijke oplossing die zo ook niet werkt. Een clear:both kan je toepassen door een extra element toe te voegen onder het sluiten van je content div.

Een nettere oplossing is gewoon overflow:hidden op je frame te zetten.

edit:
met King_Louie dus

[Technicality]

Mmh, redelijk suf inderdaad...

[Victor]

Overigens om de oorspronkelijke vraag te beantwoorden en niet alleen een quickfix te geven: de reden dat je border alleen het #content element omvat, is omdat floated elementen buiten de flow vallen. Ze forceren de container dus niet om mee te groeien.

Door middel van overflow: auto of overflow: hidden kun je dit ongedaan maken. De container schaalt nu weer mee. De reden dat je beter overflow: hidden kunt gebruiken, is omdat overflow: auto nogal eens ongewenste scrollbalken kan laten verschijnen.

De oplossing die Technicality aandraagt werkt door een extra element toe te voegen onder je twee kolommen en deze een clear: both te geven. Hierdoor moet de container meerekken om ook dit element te omspannen.

[Sgrovert]

overflow: hidden doet het ook niet goed. In IE 6 werkt het helemaal niet. En in FF werkt het wel, alleen laat deze de tekst van het menu veel te breed worden. Al komt dat misschien door de <pre> tags.
Kijk maar http://www.student.tue.nl/h/r.l.w.lahaije/zooi/test2.html wat er gebeurd.

[ Voor 19% gewijzigd door Sgrovert op 03-12-2006 22:01 ]

[Victor]

Sgrovert schreef op zondag 03 december 2006 @ 21:58:
overflow: hidden doet het ook niet goed. In IE 6 werkt het helemaal niet.

Kijk eens:

King_Louie schreef op zondag 03 december 2006 @ 21:03:
En aangezien dit in IE alleen werkt als het element layout heeft, ook height: 1%

En in FF werkt het wel, alleen laat deze de tekst van het menu veel te breed worden. Al komt dat misschien door de <pre> tags.
Kijk maar naar link wat er gebeurd.

Komt inderdaad door het pre element.

[Sgrovert]

Het lukt in IE 6 niet om met height 1% het goed te krijgen. dit werkt alleen goed als er geen overflow is.
FF doet het goed met overflow erbij, maar dan doet IE het niet goed
IE doet het goed met overal height 1%, maar dan doet FF het niet goed

[mithras]

Probeer het dan eens om in pixels te positioneren, procenten kunnen misschien dan de problemen veroorzaken.

[Victor]

Sgrovert schreef op zondag 03 december 2006 @ 22:07:
Het lukt in IE 6 niet om met height 1% het goed te krijgen. dit werkt alleen goed als er geen overflow is.
FF doet het goed met overflow erbij, maar dan doet IE het niet goed
IE doet het goed met overal height 1%, maar dan doet FF het niet goed

Ah, zie het al. height: 100% van je body element afhalen en height: 1% op je container element.

[Sgrovert]

Positioneren in pixels gaat niet de oplossing zijn. Er komt een systeem voor de ledenadministratie voor mijn verenigging op te draaien, en daarbij wordt er veel gebruik gemaakt van een paar oude pc's (800x600) om data in te voeren. Echter zitten er ook pagina's bij die zeer veel data moeten weergeven, en een breder beeld dan 800x600 nodig hebben. Die pagina's worden op andere pc's opgevraagd die een veel grotere resolutie hebben. En dan wil je dus niet vast zitten aan 800x600 omdat alles absoluut staat.

[Sgrovert]

King_Louie schreef op zondag 03 december 2006 @ 22:12:
[...]

Ah, zie het al. height: 100% van je body element afhalen en height: 1% op je container element.

Thx.

Dat was idd de oplossing. Had ik zelf nooit gevonden. Is namelijk een van de eerste dingen die ik erin gezet heb.

[Victor]

Sgrovert schreef op zondag 03 december 2006 @ 22:18:
[...]


Thx.

Dat was idd de oplossing. Had ik zelf nooit gevonden. Is namelijk een van de eerste dingen die ik erin gezet heb.

Reden dat het height: 1% zonder dat geen problemen geeft, is omdat er geen waarde is om die 1% op te berekenen. Echter, met die 100% pakt ie dus inderdaad 1% van je body element en dankzij de overflow: hidden verdwijnt je pagina dus grotendeels.

Het feit dat die height: 1% nodig is, is wel betreurenswaardig te noemen, maar een noodzakelijk kwaad dankzij dat stuk schroot genaamd IE.

[Sgrovert]

Ja zeker. Gelukkig dat hij het nu doet. Had nog een raar probleem, en dat was dat ik in content geen margin in pixels kon geven. Hij zette het stukje naast het menu direct naast het menu plat tegen de zwarte lijn aan, en ging bij meer content onder het menu door met de ingestelde marge vanaf de grijze lijn aan de linkerkant. Opgelost door de margin-left op 21% te zetten

[Sgrovert]

De stylesheet is toch nog niet 100% goed. Op het moment dat de content korter is dan het menu maakt hij regelmatig in IE 6 de div van het menu te klein (evengroot als die van de content), waardoor het onderste stuk stuk wegvalt. Hoe zou ik kunnen zorgen dat deze in IE 6 altijd groot genoeg gemaakt wordt?