1. Webdesign 101 forside
  2.  » Avanceret float-layout

Float-layout med 3 spalter

I forhold til de tidligere eksempler er det ret uproblematisk at tilføje en ekstra spalte til nyhedsresuméer, annoncer, teasers eller hvad man nu ellers skal bruge en sådan esktra smallere spalte til.

Jeg er klar over at dette layout er lidt usædvanligt i forhold til det sædvanlige trespaltede med en smal, en bred og endnu en smal spalte.

Herefter ser HTML-kildekoden til de relevante dele af layout'et ud som følger:

<div id="side">
  <div id="banner">
  [ Sidehoved ]
  </div>
  <div id="container">
    <div id="indhold">
      <div id="nav">
      [ Navigationsspaltens indhold ]
      </div>
      <div id="sidebar">
      [ Sidespaltens indhold ]
      </div>
      <div id="artikel">
      [ Artikelindhold ]
      </div>
    </div><!-- /indhold -->
    <div class="clear"> </div>
  </div><!-- /container -->
</div><!-- /side -->

Jeg har fremhævet den nye indsatte spalte. Bemærk at den er indeholdt i samme div som de to øvrige spalter, nemlig spalten #indhold. Dette antyder hvilke ændringer der skal til i stylesheet'et for at skabe plads til denne ekstra spalte:

div#side {
  width:95%;
  max-width:63em;
  min-width:760px;}
div#container { overflow:hidden;}
div#indhold {
  width: 100%;
  float: right;
  margin-left: -420px; }
div#artikel {
  margin-left:420px; }
div#nav {
  width: 200px;
  float: left; 
  background-color:#939d92;}
div#sidebar {
  width: 200px;
  float: left; 
  padding-right:8px;
  border-right: 2px solid #939d92;}
#sidefod {
  border-top:1px solid gray;
  clear: both;   }
#nav, #artikel, #sidebar {
  padding-bottom:1000em;
  margin-bottom:-1000em;}

Jeg gengiver for en ordens skylde alle layout formdeklarationerne i ovenstående. Jeg har fremhævet ændringerne:

  1. Den negative margin på #indhold-elementet er gjort noget bredere. Derved skabes plads til
  2. den tilsvarende bredere venstre margin på #artikel-elementet.
  3. De to left-float'ede smalle spalter fylder tilsammen 410 pixel.

Som antydet foretrækker jeg generelt at artikelteksten står længst til venstre i flerspaltede layouts. Det er ganske let at spejlvendte sådanne float-layouts, så det har jeg gjort i eksempel 5.

Oprettet april 2009