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>:

masthead Lorem ipsum dolor sit amet

content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.

sidebar
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus.

footer Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus.

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>

Doe mee met de conversatie

1 reactie

  1. Pingback: xii | 12
Laat een reactie achter

Zeg uw gedacht

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.