[CSS] Opvullen variabele restruimte met een div

[Vircos]

Ik zit met het volgende probleem en kan hier geen oplossing voor vinden op het internet.
Momenteel ben ik samen met een kennis van me een intake-portal aan het ontwerpen in java met een webbased frontend.

De voorkant is verdeeld in een header, 3 kolommen en een footer.
De 3 kolommen zijn zwevende div-jes (float). De linkse kolom bevat een navigatie menu, de middelste kolom bevat de content en de rechtse kolom bevat help informatie over de content.

Nu is niet altijd de rechtse kolom aanwezig, dus blijft er restruimte over aan de rechterkant. Dit wil ik dan weer automatisch opvullen met de middelste kolom (content) middels CSS.

Een stukje gestripte CSS code.

Cascading Stylesheet:

#container {
  width: 100%;
}
/*--- Linker kolom ---*/
#nav_menu {
  float: left;
  width: 25%;
}
/*--- Middelse kolom ---*/
#content {
  float: left;
  width: 50%;
}
/*--- Rechter kolom ---*/
#help_topic {
  float: right;
  width: 25%;
}

En een stukje gestripte HTML-code

HTML:

<div id="container">
  <div id="nav_menu>
    Menu
  </div>
  <div id="content">
    Hier staat wat tekst.
  </div>
  <div id="help_topic">
    Hulp nodig?
  </div>
</div>

Hoe kan ik nu via CSS bepalen dat, zodra de rechter kolom afwezig is, de middelste kolom dat opvult?

Gebruik voortaan de talen in je code blok

[ Voor 2% gewijzigd door BtM909 op 17-01-2008 13:27 ]

[H004]

De middelste kolom niet floaten en ook geen width opgeven.

bv:

HTML:

<div id="nav_menu"></div>
<div id="help_topic"></div>
<div id="content"></div>

Cascading Stylesheet:

#container {
  width: 100%;
}
/*--- Linker kolom ---*/
#nav_menu {
  float: left;
  width: 25%;
}
/*--- Middelse kolom ---*/
#content {
}
/*--- Rechter kolom ---*/
#help_topic {
  float: right;
  width: 25%;
}

[Vircos]

Bedankt voor de oplossing. Dit werkt inderdaad prima

En ik zal voortaan op de talen letten

Edit:

Beetje te vroeg gejuigd. Nu stroomt de content div, zodra deze hoger is, om de floatende div's heen. Dat is niet de bedoeling.

[ Voor 65% gewijzigd door Vircos op 17-01-2008 14:28 ]

[Civil]

Ik denk dat je er niet onderuit komt om in de html in de div #content een extra labeltje (class) te hangen. Aan de hand van deze class kun je vervolgens via de stylesheet wat extra/afwijkende stijling meegeven aan de content div.

Dit geeft amper extra belasting aan de server, het enige wat die moet berekenen is of er een extra kolom in de html gezet wordt. Aangezien dit eigenlijk al bekend is, is dat geen extra belasting. IF column is generated var_x is 1. In de templates vang je deze variabele af en zet je een extra class in de html.

[Vircos]

Ik vrees het ook Civil. Mijn collega gaf de voorkeur aan een CSS oplossing. Maar dan heeft ie nu mooi pech gehad.

We gaan de suggestie van Civil toepassen.
Bedankt voor de hulp

[f.v.b]

De extra class is niet nodig. De div#content heeft tenslotte al een id.

Als je tijdens het renderen van de css al weet dat er geen rechter kolom aanwezig is, dan hoef je alleen maar een andere breedte op te geven.

Mocht je dat op dat moment nog niet weten, dan kan je met behulp van een inline style het ook nog in de HTML zetten op het moment dat je div#content rendert. Niet mooi, maar geen mens zal er last van hebben.