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

Float-layout med venstrestillet artikel

I forhold til eksempel 4 er det forbavsende let at spejlvende det trespaltede layout, således at de to smalle spalter bliver højrestillet og artikelspalten bliver venstrestillet.

Der er overhovedet ingen ændringer i HTML-kildekoden i forhold til eksempel 4, og ændringerne i stylesheet'et er også til at overse, det drejer sig igen kun om at ændre left til right og omvendt.

De formdeklarationer, der en involveret, er følgende:

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

Bemærk sidebredden, der er sat til 55em. Det svarer til ca. 880 pixel hvis læseren bruger normal (medium) skriftstørrelse og vil atså medføre en vandret rulleskakt hvis denne læsers browservindue kun er 800 pixel bredt.

Til gengæld opnås hvad jeg anser for en komfortabel linjelængde, jævnfør den første linje i foregående afsnit, hvor den grå baggrund er bag de første 64 tegn.

Oprettet april 2009