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

Float-layout med 3 spalter

Igen er det ret let med den foreliggende HTML-kildekode – for eksempel fra eksempel 5 – ved hjælp af nogle få ændringer i stylesheet'et at få det konventionelle trespaltede layout.

Her kan jeg droppe tricket med negative marginer og simpelt hen venstre-float'e #nav-spalten og højre-float'e #sidebar-elementet.

Tricket til at holde styr på float'ede elementer er bestandigt at huske på, at elementer, der ikke er float'ede flyder op på siden af de float'ede elementer, hvis der ellers er plads. Konsekvensen er, at de float'ede elementer skal indsættes i kildekoden før de ikke-float'ede elementer.

Stylesheet'et for layout ser nu således ud:

div#container { overflow:hidden;}
div#indhold {
  width: 100%; }
div#artikel {
  margin-left:220px;
  margin-right:220px; }
div#nav {
  width: 200px;
  float: left; 
  background-color:#939d92;}
div#sidebar {
  width: 200px;
  float: right; 
  border-left:2px solid #939d92}
#nav, #artikel, #sidebar {
  padding-bottom:1000em;
  margin-bottom:-1000em;}

Det er i virkeligheden meget enkelt: #artikel-elementet flyder op på højre side af det left-float'ede #nav-element, som der er skabt rigelig plads til ved hjælp af #artikel-elementets margin-left-egenskab; fremdeles flyder #artikel-elementet op på venstre side af det right-float'ede #sidebar-element, som der også er skabt plads til ved hjælp af #artikel-elementets margin-right-egenskab.

Nu med brugervalgt layout

Det er ikke sikkert, at du har tænkt over det, men faktum er, at dette eksempel og de to foregående omfatter præcis den samme HTML-kode.

Det, der forandrer sig fra det ene eksempel til det andet, er det dokumentindlejrede stylesheet. Hvis jeg nu klipper det ud af de tre sider og laver 3 forskellige eksterne stylesheets, kan jeg indlæse disse ved hjælp af en stylesheet switcher. Resultatet af det bliver eksempel 7.

Oprettet april 2009