Mikael Brevik

Nå er det kommet ut en ny utgave av A List Apart. Denne gangen var en av de to artiklene om multi-column layout. Som vi alle vet kan det være en slitsom prosess - særlig med tanke på dynamisk bredde og forskjellige farger på kolonnene som går helt ned. Det er nemlig det som er problemet. Om vi skal ha forskjellig farge på kolonnene og hver og en av de skal gå ned til bunnen må vi til med bildet i bakgrunnen. Da blir det noe problematisk med dynamisk bredde, blir det ikke?

Nå har en av skribentene i A List Apart, Alan Pearce, funnet en måte å kunne løse dette på. Men selvsagt det har jo sine begrensninger. Les artikkelen på ALA

Som han selv så elegant skrev det: Han måtte tenke ut av boksen, og det var nemlig det han gjorde. Hva er utenfor en boks (les: divisjon)? Jo, rammer/border!

Løsningen er simpel, bruk border med en farge og legg en divisjon over den. Bruk negativ margin til å plassere en divisjon over.

Eksempel på simpel måte å bruke det på.

CSS

Her ser du CSS-en som blir brukt, så vil du se det simple konseptet bak teorien.

Forklaringen

Det som blir gjort er selvforklarende om du ser der. Bruk border, med bredden til feltet og ha negativ margin på den samme bredden. Så bruker du den ønskede fargen på border. Rail er sidebar, eller sidefeltet og container er utenfor alt. Wrappen.

Om du ser nøye på CSS-kodene legger dere kanskje merke til * html #container og margin:0 100px;. Disse gjør at container blir midtstilt.

Om du er ute etter tre kolonners layout er det bare å klone høyre siden her til venstre siden. Om du kun er ute etter venstresiden er det bare til å endre på float og til border-left.

Dere kan se et supert eksempel under artikkelen.

Bakdeler

Hvor ofte kan man få bruk for dette? Jeg er ikke helt sikker på om jeg kommer til å adoptere metoden. For det første har den ingen støtte for min-width til sentralelementet, heller ingen god støtte for dynamisk bredde. Det er viktig å huske at det ikke er mulig å bruke %-definisjoner av bredden til border, derfor er alltid bredden på side-elementene statiske, mens sentral-elementet kan være dynamisk. Det vil føre til at lite vindu vil være stygt. Da er det mulig en må adoptere andre metoder og kanskje bruke JavaScript til å sjekke brukerens bredde av nettleseren til å definere stilsett.

Bakdeler er altså: Ingen min-width, ingen dynamisk bredde på side-elementene.