De truken van de foor

Tss, een geval van zwaar lateraal denken. Probleem: met <div>’s in deze volgorde:

<div id="masthead">
...
</div>

<div id="body">
...
</div>

<div id="sidebar">
...
</div>

<div id="footer">
...
</div>

er proberen voor zorgen, zonder absolute positionering en zonder body en sidebar van plaats te verwisselen, dat de sidebar naast de body staat.

Reden:

1. masthead moet gewoon groter en kleiner kunnen worden en dan is het niet handig om een top: 200px of zo te zetten op sidebar
2. voor indexering door search engines en als de pagina gerenderd wordt zonder style sheet, is het mooier dat de echte inhoud na de hoofding staat, en de sidebar eronder

Ik heb er op gezocht en niets gevonden, en dan maar de volgorde omgekeerd gelaten… tot ik vandaag bij mezzoblue identiek dezelfde vraag zag staan. En ook meteen een oplossing, mits één extra <div>:

Proper. Fijn. En ge moet er maar op komen:

<style>
#masthead {
   background: goldenrod;
}
#container {
   width: 100%;
   float: left;
   margin-right: -210px;
   background: yellow;
}
#content {
   margin-right: 210px;
   background: lightgreen;
}
#sidebar {
   width: 200px;
   float: right;
   background: lightblue;
}
#footer {
   clear: both;
   background: pink;
}
</style>

<div id="masthead">...</div>
<div id="container">
   <div id="content">...</div>
</div>
<div id="sidebar">...</div>
<div id="footer">...</div>