[CSS] 2 kolommen divs, gelijke (onbekende) height zetten

[gizmo9003]

Ik heb een layout met 2 kolommen (floating divs).
De eerste kolom bevat 5 div's, van 600 pixels breed. De middelste is een content div, waarvan de lengte op voorhand niet bekend is.
De 2e kolom moet over de gehele lengte van de pagina meelopen (rightsidebar).
Dit geheel staat in een container div.

Is de tekst in de content div minder dan 1 pagina lengte, dan moeten de kolommen automatisch opgerekt worden tot 100%, dat lukt me. De rechter div op 100% krijgen lukt me ook.
Maar er ontstaat een probleem, als er wat meer (meer dan 1 pagina) tekst in de content div staat. De linkerkolom wordt dat netjes opgerekt, maar de rechterkolom blijft precies "1 pagina" hoog.
Terwijl de omringende div wel netjes mee rekt.

Weet iemand de oplossing?
Op internet vind ik oplossing met "position; absolute", maar dan krijg ik mijn rechterkolom niet meer zo dat deze de gehele 'overige ruimte' in de breedte opvult, wat nu zonder position definitie wel netjes lukt.

code:

#container {
  position: relative;
  overflow: auto;
  border: 3px solid;
}
#header {
  float: left;
  width: 600px;
  border: 1px solid;
}
#rightsidebar {
    min-height: 100%;
  overflow: hidden;
  border: 1px solid;
  background: red;
}
#gradientbar {
  float: left;
  width: 600px;
  border:1px solid;
  clear: left;
}
#menu {
  float: left;
  width: 600px;
  border:1px solid;
  clear: left;
}
#main {
  float: left;
  width: 600px;
  height: auto;
  border:1px solid;
  clear: left;
}
#footer {
  float: left;
  width: 600px;
  border:1px solid;
  clear: left;
}

html, body {
    margin: 0;
    height: 100%;
    }

En vervolgens:

code:

 <div id="container">
     <div id="header">header dingetje</div>
     <div id="gradientbar">gradientbar</div>
     <div id="menu">menubalkje</div>
         <div id="main">hier dan veel meer tekst plaatsen dan 1 pagina</div>
         <div id="footer">footer balkje</div>
     <div id="rightsidebar">rechterkant</div>
 </div>

[NMe]

Faux columns of display: table-cell.

offtopic:
Als je echt alleen maar divs gebruikt (en niet alleen hier in dit voorbeeldje) wil je misschien eens gaan kijken naar de juiste semantiek voor je pagina. Met name je #header en #menu kunnen beter respectievelijk <header>/<h1> en <nav>/<ul>-tags zijn.

[ Voor 78% gewijzigd door NMe op 06-01-2014 19:20 ]

[gizmo9003]

NMe schreef op maandag 06 januari 2014 @ 19:18:
Faux columns of display: table-cell.

Table-cells lijken me inderdaad interessant, ben er wat mee aan het puzzelen. Zie alleen dat er niet zoiets bestaat als row-span in de table-cell display. Dus dan krijg je 5 rijen van 2 kolommen, waarbij de rechter kolom dus ook in 5 rijen is opgesplitst. Er zijn wat hack-arounds met inline blocks plaatsen om dat te 'verbergen', maar dat lijkt me ook weer niet de juiste manier. Misschien toch maar naar Faux columns dan... bedankt in ieder geval!

[NMe]

Je kan natuurlijk ook gewoon andere elementen in je table-cell zetten, als wordt dat lastig als je daar iets wil doen met (relative) positioning. Display: table-cell en position: relative op hetzelfde element is vragen om problemen.

Faux columns zijn een wat breder geaccepteerd alternatief.

[MoietyMe]

Dit kan je natuurlijk ook simpel met JavaScript oplossen.

[NMe]

Good Fella schreef op dinsdag 07 januari 2014 @ 17:09:
Dit kan je natuurlijk ook simpel met JavaScript oplossen.

Dat zal vrijwel nooit mooi uitzien.

[4WardNL]

Zou je hier niet ook gewoon gebruik kunnen maken van 'min-height: 100%;' op de column div?

Edit: laat maar

[ Voor 10% gewijzigd door 4WardNL op 07-01-2014 23:09 ]

[MoietyMe]

Nevermind wat ik hiervoor zei.

Flexbox!

[NMe]

Too soon. Het komt in de buurt maar met voorlopig nog even missende support in Firefox en het feit dat veel browsers nog prefixes nodig hebben maakt 't minder handig in het gebruik. Maar zeker wel de toekomst.

[R4gnax]

NMe schreef op woensdag 08 januari 2014 @ 12:01:
Too soon. Het komt in de buurt maar met voorlopig nog even missende support in Firefox en het feit dat veel browsers nog prefixes nodig hebben maakt 't minder handig in het gebruik. Maar zeker wel de toekomst.

FYI; enige onderdeel van flex box dat Firefox niet ondersteunt is flex-wrap. Dat komt vanaf versie 28.

[NMe]

Klopt, maar die flex-wrap lijkt me voor de topicstarter voor dit probleem redelijk essentiëel.

[MoietyMe]

Zoiets zou toch overal wel moeten werken (IE10+): CodePen

Voor IE9 en lager zul je dan al een fallback moeten maken. Zolang de website niet responsive is, of in ieder geval het linker gedeelte de zelfde breedte houd zou ik, zoals NMe al aangeeft, gewoon faux-columns gebruiken.