1. Webdesign 101 forside
  2.  » Design
  3.  » CSS float-layout
  4.  » Avanceret CSS float-layout

Avancerede float-layouts

Artiklen er et addendum til artiklen Layout med float-egenskaben fra 2007.

I denne artikel præsenterer jeg en alternativ metode til at skabe udseende af to eller flere lige høje spalter.

Kviklinks til eksemplerne

To-spaltet float layout med venstrestillet artikel, højrestillet menuspalte.
To-spaltet float layout med venstrestillet artikel, højrestillet menuspalte. Lige høje spalter gennem ekstrem padding og negative marginer.
To-spaltet float layout med højrestillet artikel, venstrestillet menuspalte. Lige høje spalter gennem ekstrem padding og negative marginer.
Tre-spaltet float layout med højrestillet artikel, to venstrestillede smalle spalter. Lige høje spalter.
Tre-spaltet float layout med venstrestillet artikel, to højrestillede smalle spalter.
Konventionelt tre-spaltet float layout, en smal venstrestillet menuspalte, en bredere midterspalte til artiklen og en smal højre spalte til resuméer, annoncer osv.

Brugervalgte stylesheets

De tre sidstnævnte eksempler udmærker sig ved at have nøjagtig den samme HTML-kode. (Bortset naturligvis fra tekstindholdet). Det frister til at lave et lille eksperiment med brugervalgte stylesheets. Det har jeg tidligere skrevet om i artiklen Brugervalgte stylesheets. Fra den artikel har jeg nappet det lille JavaScript, der gør dette muligt. Resultatet ser du i eksempel 7.

Grundlæggende teknik

Hvert eksempel omfatter en redegørelse for, hvorfor og hvordan eksempler er konstrueret. Hvis din erfaring med brug af float til layout er begrænset, kan du have udbytte af at læse min artikel Layout med float-egenskaben fra 2007, og de eksempler der er knyttet til den artikel.

Oprettet: April 2009