[HTML/CSS] Divs gelijke hoogte.

[Duncank]

Ik heb 2 div's naast elkaar staan op een pagina dmv. float. Hieronder heb ik de footer van de pagina staan.
De linker div staat behoorlijk vol, en in de rechter staan maar een paar regeltjes.
Hoe zorg ik er nu voor dat de rechter even lang is als de linker? Ik bedoel hierbij dus dat dan de achtergrond in de rechter-div net zo lang is doorgetrokken dan de linker lang is. De footer zal dan ook pas op de juiste plaats komen te staan aangezien hij nu op de hoogte van de rechter div begint.

Alvast bedankt!

[Nedra]

Ik kan nog niet helemaal visualiseren wat je bedoelt. Kan je beide DIVs niet gewoon een vaste hoogte meegeven? Als dat niet kan, kan je misschien de rechterdiv een 'min-height' meegeven? Zo zal deze div altijd minimaal de gespecifieerde hoogte zijn. Het enige probleem is dat dit geloof ik weer niet wordt ondersteund door IE6.

[Duncank]

Ik wil dat wanneer ik in de linker-div meer tekst typ, dat de rechter automatisch meevormt in hoogte. (net zolang blijft als de linker).
Dus wanneer ik besluit een hele alinea links te verwijderen, dat rechts ook kleiner wordt en de footer dus goed aansluit.

Met een min-height moet ik m dus zelf nog elke keer aanpassen als ik wat bij typ/verwijder.

Het probleem zit m nu in de float. Firefox legt de div dan over de pagina heen en telt hem niet mee in andere div's. IE daarentegen geeft alles wel goed weer..

[ Voor 33% gewijzigd door Duncank op 11-06-2008 12:34 ]

[Cadezo]

Kan het het niet oplossen met faux columns?

[Bozozo]

Dit is een veel voorkomende vraag, en met de GoT search of Google moet je er wel uit kunnen komen.

[Nedra]

Hmm lastig. Daar heb ik niet zo 1,2,3 antwoord op maar k ben dan ook geen CSS guru. Misschien is het handig als je wat van de code hier post.

[SandaX]

Als je een div onder wilt krijgen zou je gebruik kunnen maken van de clear:both in een extra divje of br.

[Verwijderd]

Dit kan bijvoorbeeld zo:

Css:

code:

#container { background: url(bg.gif); overflow: hidden; height: 100%; }
#col-a { float: left; }
#col-b { float: left; }

HTML:

code:

<div id="container">
    <div id="col-a"></div>
    <div id="col-b"></div>
</div>
<div id="footer"></div>

En dan rekt de background van #container als het goed is mee met de hoogte van col-a en col-b.

[Duncank]

Okej.. het is eindelijk gelukt. Wat wel raar is, is dat wanneer ik bij container de height op 100% zet, de pagina een flink stuk uitrekt naar onder, terwijl ik hier niet om gevraagd heb.

[Kiphaas7]

Duncank schreef op woensdag 11 juni 2008 @ 17:10:
Okej.. het is eindelijk gelukt. Wat wel raar is, is dat wanneer ik bij container de height op 100% zet, de pagina een flink stuk uitrekt naar onder, terwijl ik hier niet om gevraagd heb.

100% height + margin en/of padding als je die ook nog eens toepast.

Dus dan wordt het meer dan 100%.

[Verwijderd]

Duncank schreef op woensdag 11 juni 2008 @ 17:10:
Okej.. het is eindelijk gelukt. Wat wel raar is, is dat wanneer ik bij container de height op 100% zet, de pagina een flink stuk uitrekt naar onder, terwijl ik hier niet om gevraagd heb.

Zou niet moeten, heb je de 100% niet toevallig op de body gezet? En wat is je doctype? Post anders ff je code...