[CSS] 2-col layout

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.

Dan heb je wel het probleem dat je een extra CSS moet schrijven voor IE, wat ik persoonlijk zoveel mogelijk probeer te vermijden. Wat je wel kunt doen is een extra div rond je andere twee divs plaatsen en daar de achtergrond in te steken die je wenst. Dit ziet er dan bijvoobeeld zo uit:

<div id="container" style="width: 100px;"> --> stop hier je achtergrondafbeelding in
<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>

Het is eigelijk een lapmiddel die je de indruk geeft dat beide divs even hoog zijn, maar het wordt erg veel gebruikt ;)

@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).

Met welke oplossing?

En @beide: Zie mijn edit :) Had eerst resultaat met google gepakt, maar niet goed gekeken, dat was namelijk niet de code die ik voor ogen had. Conditional Comments zijn ook bah :P

Edit: Oh sorry, begreep je niet goed, nee inderdaad, het trekt alleen de wrapper eromheen. Hiervoor is de oplossing net gegeven, door de wrapper de achtergrond te geven ipv de kolom.

Nops, ik zie geen verschil.

Edit:

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

Zijn dat allebei twee verschillende achtergrondafbeeldingen of zijn het gewone repeaters? Heb je al iets online staan zodat we het wat beter kunnen situeren?

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

@sam

Linker div heeft een normale background colour. rechter div heeft een repeat van boven naar beneden.

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?

Juist, dat begint erop te lijken. Nu moet ik alleen de background nog 5px van de bottom afhouden. Nu zit ik met background-position te klooiten, maar dat wil niet werken?