[float] left en variabel right, left moet opvullen

[Verwijderd]

Beste alle,

Ik heb een container div met daarin 2 divs, linker en rechter met resp. float: left en right. Daaronder zit nog een div met clear; both. In de Zowel in de linker als rechter kolom komt content te staan, maar de rechterkolom moet sluitend zijn, die moet dus precies zo breed zijn als nodig is om de content weer te geven (een plaatje bv). De content is niet altijd even breed.
De linker kolom moet dan alle breedte opvullen die er in de container, die een fixed width heeft, over is. Alles wat ik tot nu toe heb geprobeerd (width: auto, min-width, float combinaties) hebben allemaal tot niets geleid; iedere keer gaat de rechter kolom op dezelfde plek, maar dan onder de linker staan.

HTML:

<div>container
 <div>left</div>
 <div>right</div>
 <div>clear</div>
</div>

Cascading Stylesheet:

#container { width: 300px; }
#left { float: left; }
#right {float: right }
#clear { clear: both; }

Kortom; rechts moet sluitend zijn, en links opvullen. Wie o wie?

[DoubleJ]

min-width meegeven aan je rechter kolom?

[ Voor 12% gewijzigd door DoubleJ op 19-07-2007 09:13 ]

[Verwijderd]

geef #container padding gelijk aan de gewenste breedte van #left. Daarna kun je #left met een negative margin (weer relatief aan de breedte van #left) deze kolom over de padding van #container plaatsen.

Hierna kun je #right gewoon relative maken waardoor hij alle bruikbare ruimte van #container zal vullen, dus niet de padding.

Vergeet ook niet #clear ook een negative margin te geven als je wil dat hij de hele breedte van #container gebruikt.

Note: mocht je in IE6 dubbele margins krijgen? zet display inline in de floating blokken.

[Verwijderd]

Het probleem is dus dat zowel left als right niet altijd even breed zijn, maar dat ik right "voorrang" wil geven; alsin dat die precies de ruimte moet nemen die die nodig heeft, en left krijgt de rest. Met vaste padding en mid-width werken heeft daardoor volgens mij geen zin.

[Verwijderd]

Verwijderd schreef op vrijdag 20 juli 2007 @ 13:33:
Het probleem is dus dat zowel left als right niet altijd even breed zijn, maar dat ik right "voorrang" wil geven; alsin dat die precies de ruimte moet nemen die die nodig heeft, en left krijgt de rest. Met vaste padding en mid-width werken heeft daardoor volgens mij geen zin.

Dit kan alleen met het volgende:

Cascading Stylesheet:

#container { width:300px; display:table; background:#FF0;}
#left { display:table-cell; width:100%; background:#F00;}
#right {display:table-cell; }

Maar dat werkt niet in IE.

Advies: verzin een andere layout. Dit is zonder tabellen of JavaScript niet te realiseren.

[Verwijderd]

ok bedankt. Helaas is IE-ondersteuning zeer gewenst, en moeten de pagina's zo weinig mogelijk JS bevatten.