[CSS] 2-col layout

Goedeavond,

Ik heb een 2 col layout, met een sidebar aan de rechterkant. Nu heb ik het probleem, dat als een van de twee te lang is, de achtergrond van de andere div niet doorloopt. Vroeger had ik hiervoor een javascriptje, maar ik kan deze nergens meer vinden. De achtergrond van de sidebar is een afbeeldingen.

Iemand een idee?

Niks geen JS voor nodig, gewoon CSS: clearfix.
Aan beide kolommen de class 'clearfix' geven (en uiteraard de CSS toevoegen) en het zou al geregeld moeten zijn.

edit: URL verandert! Deze is iets beter, gebruikt geen Conditional Comment.

@willem
Helaas, hij trekt de achtergrond van de 'korte' div niet door.

@sam

Het moet werken met beiden gevallen. Dus als de linker div lang is, moet de height van de rechterdiv aangepast worden, maar ook precies andersom.

(links = kleurtje, rechts = afbeelding).

Nops, ik zie geen verschil.

Edit:

Maar ik heb toch 2 verschillende achtergronden voor links en rechts? Hoe ga ik dat regelen?

<div style='clear:both;background:none'>&nbsp;</div>. Voeg dat eens toe? Dat werkt als het goed is.

Dan steek je in die container div gewoon een backgroundimage die je voor beide helften kan gebruiken. Ik gebruik mijn bovenstaande code terug:

<div id="container" style="width: 100px;">
<div id="links" style="width: 50px; float: left; display: inline;">Links</div>
<div id="rechts" style="width: 50px; float: right; display: inline;">Rechts</div>
</div>

Stel dat de hoogte van de achtergrondafbeelding in de rechtse div 50 pixels bedraagd, dan maak je dus een achtergrondafbeelding waar je de ene kant vult met vlakke achtergrondkleur (ook 50px hoog) en de andere kant met de achtergrondafbeelding van 50px hoog. Daarna stel je gewoon een verticale background-repeat in. Ik probeer de achtergrondafbeelding die ik in gedachten heb wat visueel voor te stellen:

.......................................-----------------------------
......................................|----------------------------|
......................................|----------------------------|
......................................|----------------------------|
..........egaal kleur............|---------afbeelding-------|
......................................|----------------------------|
......................................|----------------------------|
......................................|----------------------------|
.......................................-----------------------------

Hopelijk begrijp je wat ik bedoel?

Lukt met een margin-bottom van 5 px op die container div. Niet vergeten om dan ook nog 5 pixels af te doen van de hoogte van die container div ;)