3 kolommen naast elkaar, rechterkolom veranderen van breedte

**Arian Stolwijk** · 05-05-2006, 19:05

Ik wil 3 kolommen, linker kolom 200px breed, middelste kolom 500 px breed, en de rechter kolom moet dan de rest van het scherm innemen.

Voorbeeld:
Dus als je scherm 1024 px breed is, dan de rechter kolom 224px breed is,
als je schrem 800 px breed is dat hij dan automatisch smaller wordt tot 100 px.

Betreffende HTML Code

Code:

<div id="links">&nbsp;</div>
<div id="midden">&nbsp;</div>
<div id="rechts">&nbsp;</div>

Betreffende CSS Code:

Code:

#links {
	width:200px;
	float:left;
}
#midden {
	width:500px;
	margin-left:229px;
}
#rechts {
	width:100%;
	float:right;
	margin-left:700px;
}

Maar zoals je vast wel kunt verwachten, komt kolom "rechts" onder kolom "links" en onder kolom "midden" over de gehele breedte.

Heeft iemand een idee,

Groeten,
Arian

**Bart W** · 06-05-2006, 09:25

Ik begrijp niet helemaal wat je bedoelt maar misschien kan dit voorbeeld je helpen: http://www.gigadesign.be/multi_kolom_3_fluid.html

**Arian Stolwijk** · 06-05-2006, 09:44

Dit bedoel ik inderdaad, alleen de middelste kolom moet niet van breedte veranderen maar de rechter kolom... snap je?

**Carlier B.** · 06-05-2006, 11:25

Om een rechterkolom fluid te maken dien je slechts de dimensies van deze kolom niet te bepalen en alles naar links te floaten.

Voorbeeldcss:

Code:

#links {
    width:200px;
    float:left;
    color:#FFF;
    background: #000
}
#midden {
    width:500px;
    float:left;
    background: #FF0
}
#rechts {
    background: #F00
}

Voorbeeldhtml:

Code:

...<body>
<div id="links">Dit staat links en is fixed</div>
<div id="midden">Fixed middengedeelte</div>
<div id="rechts">Dit staat rechts en is fluid</div>
</body>...

En aan de hand van een voorbeeld.

**Arian Stolwijk** · 06-05-2006, 12:08

Het werkt nu :D
Bedankt!

3 kolommen naast elkaar, rechterkolom veranderen van breedte