Gillar du den här guiden? Vill du att vi ska fortsätta göra fler guider? - läs mer här » 

skriv ut »

CSS - positionering

Vad är CSS och varför ska du använda det?

Innehåll och struktur
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte fanns i HTML standarden. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen. CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webbläsaren. Då samma mall används för varje dokument behöver inte webbläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.

Tillgänglighet
En målsättning med CSS är att läsaren ska kunna påverka utseendet av dokumentet när sidorna läses i webbläsaren vilket inte alltid har varit populärt bland författarna av dokumenten då förändringar kan påverka webbplatsens layout. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på webbsidor. Tillgänglighet är ett av ledorden när framtidens webbplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för PDA (handdator), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet. Det innebär att många webbplatser som byggts med layout som första prioritet inte fungerar om de använder tex Frames, Iframes, Imagemaps, java, javascript, nästlade tabeller, bilder utan ALT-text, GIF-animationer, Flash, Shockwave, PDF-dokument osv. Många funktioner som används idag går då¨alltså bort helt... (läs mer om W3C och webstandards »)

CSS levels
CSS finns specificerat i olika "nivåer" där CSS1 (1996) innehåller information om relativt enkel formatering som bakgrundsfärger, bakgrundsbilder, teckensnitt och justering av text. CSS2 (1998) går ett steg längre och ger möjlighet att formge hela dokument med positionerade rektangulära områden (boxar) som tidigare bara varit möjligt med tabeller (tables). CSS2 har förbättrats och finns i version CSS21 men kommer att ersättas av CSS3 som idag inte är helt färdig. Håll dig uppdaterad om alla specifikationer i CSS genom att besöka W3C för mer information: CSS1 »  -  CSS2 »  -  CSS3 »

TIPS! CSS har begränsat stöd i framförallt äldre webbläsare men även i IE6. Den webbläsare som bäst följer specifikationerna från W3C är Firefox - detta gäller framförallt CSS2- positionering. Använd i första hand Firefox när du testar dina CSS-layoter för att se det korrekta resultatet och anpassa sedan koden till IE vid behov. Läs mer om Firefox och andra webbläsare här »

Läs mer om: grunderna i CSS » - CSS-effekter » - CSS-menyer » - CSS-layout »

CSS med olika metoder

Du kan tillämpa CSS med olika metoder och det är viktigt att du redan från början bestämmer dig för vilken metod som passar dig bäst. Läs mer om de olika metoderna i grunderna i CSS »

Boxar - containers - containing block

Det finns flera begrepp för att beskriva ett område eller "avgränsat innehåll" med specifika egenskaper som tillämpas med CSS. I denna guide används benämningen "box" för att beskriva alla förekomster med egenskaper som beskrivs i infomationstexten. Boxar eller containers är områden som anges med CSS och kan användas till kolumner, menyer och andra layouter (boxar kan även placeras över eller under varandra och får då egenskapen "Lager" som kan användas i DHTML-menyer »).

Storleken på boxen är är den faktiska ytan för innehåll+padding+kantlinje. I exemplet nedan är innehållets storlek 250 pixlar dvs den yta som innehåller texten. Övriga attribut som avståndet mellan innehåll och ytterkant (padding) och kantlinjen räknas utöver den faktiska storleken på boxen.

Den totala storleken på boxen nedan är alltså 350 pixlar (250+25+25+25+25) men boxens mått anges till 250 pixlar i CSS-koden:

#box {width: 250px;
padding: 25px;
border: 25px solid;}

OBS! I en tabell med samma totala storlek anges tabellens yttermått oavsett bredd på kantlinje och cellpadding. Den faktiska ytan för innehållet minskar när avstånd mellan celler , cellpadding eller kantlinje används:

<table width="350" border="25" cellpadding="25" cellspacing="0">
<tr>
<td></td>
</tr>
</table>

VIKTIGT! Använd rätt DOCTYPE

Att använda rätt DOCTYPE är viktigt och när när du använder CSS -positionering är det oerhört viktigt! Läs mer om DOCTYPE i guiden Dokumenttyp - doctypes XML och XHTML »

Om du inte anger rätt DOCTYPE visar IE måtten för boxar på samma sätt som för tabeller vilket inte är korrekt enligt W3C (läs mer om W3C och webstandards »). Använd doctype-deklarationen Strict eller Transitional för korrekta mått även i IE:

Strict HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Du kan hoppa över länken till W3C vilket innebär att vissa webbläsare använder "quirks mode":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

Strict XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Du kan hoppa över länken till W3C vilket innebär att vissa webbläsare använder "quirks mode":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Transitional HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

OBS! Här kan du INTE hoppa över länken till W3C. Detta fungerar INTE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Transitional XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Du kan hoppa över länken till W3C vilket innebär att vissa webbläsare använder "quirks mode":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

 

Resultat av fel DOCTYPE

Användning av en felaktig DOCTYPE gör att måtten blir felaktiga i IE (men inte i Firefox) och det är alltså viktigt att du använder en korrekt doctype. Exemplen nedan visar resultatet IE6 vid användning av strict och transitional doctype när både padding och border används.

Rätt resultat

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

eller:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ger detta resultat i IE6 och FF:

klicka här för att se boxen »

Felaktigt resultat

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

ger detta resultat i IE6:

klicka här för att se boxen »

 

Alternativ lösning för rätt storlek på boxen

Det finns en alternativ lösning till att låta doctype bestämma om webbläsaren ska använda standard eller quirks mode enligt ovan. Tilldela mallnamnet en egen div för alla andra egenskaper utom just storleken. Det innebär att boxen med den önskade bredden innehåller ett eget område med de övriga egenskaperna som padding, kantlinje mm.

Notera att boxen ovan ska ha måtten 250 pixlar för innehållet och detta innebär att den totala ytan inklusive kantlinjer och padding är 350 pixlar vilket också är måtten på boxen i detta exempel.

CSS-koden för mallnamn med egenskaperna i div:

#box {width: 350px;}
#box div {padding: 25px;
border: 25px solid;}

När mallen tillämpas anges dubbla <div>:<div id="box"><div>Innehållet här...</div> </div>

 

Använda ID eller CLASS och DIV eller SPAN

Användning av DIV för "div id" och "div class" har i grunden samma funktion - de påverkar element och områden och fungerar då som containers - dvs de omsluter de element som ska formateras.

En namngiven id representerar ett unikt område och varje "id" kan bara användas en gång i varje dokument. En namngiven class kan däremot användas flera gånger i samma dokument.

SPAN är också en container men en sk "inline container" och påverkar en del av raden eller området (till skillnad från DIV som påverkar hela raden).

Div är en container som omsluter de element som ska formateras och DIV ID omsluter hela området medan DIV CLASS en del av samma område. SPAN CLASS används på en del av rad och påverkar vissa av orden i exemplet nedan:

klicka här för att se exemplet »

#inforuta {font-style: italic; border: 1px; background: #cccccc;}
.green {color: #336600;}
.red {color: #ff0000; text-decoration: underline;}

Boxar - grunder

Boxen som ska utgöra området anger du som en anpassad mall med valfritt namn (läs mer i CSS-grunder »). Namnet på mallen är valfritt men måste inledas med en punkt "." eller en brädgård "#" beroende på om mallen tillämpas med "id" eller "class". Skillnaden är att "id" bara används för en förekomst eller område medan "class" kan tillämpas på flera områden i samma dokument.

CSS-koden för en box med bredd 300 pixlar och padding 25 pixlar. Marginalerna är tillämpade på <body> och påverkar allt innehåll i dokumentet. Notera att den totala bredden på boxen är 350 pixlar:

använd brädgård "#" i mallnamnet om mallen tillämpas med "id"

body {margin: 25px;}

#box {background-color: #CCCC99;
width: 300px;
padding: 25px;}

använd punkt "." i mallnamnet om mallen tillämpas med "class"

body {margin: 25px;}

. box {background-color: #CCCC99;
width: 300px;
padding: 25px;}

HTML-koden för att tillämpa mallen i dokumentet:

om mallnamnet är #box används "id"

<html>
<body>
<div id="box">innehållet här</div>
</body>
</html>

om mallnamnet är .box används "class"

<html>
<body>
<div class="box">innehållet här</div>
</body>
</html>

Hela koden för boxen nedan om CSS tillämpas i samma dokument istället för i egen CSS-mall (läs mer i CSS-grunder »):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Webdesignskolan</title>

<style type="text/css">
<!--
body {margin: 25px;}
#box {background-color: #CCCC99;
width: 300px;
padding: 25px;}
-->
</style>

</head>
<body>
<div id="box">innehållet här...</div>
</body>
</html>

Marginaler

Avståndet för hela dokumentets vänster kant, överkant, höger kant och botten anges som margin men i ett fåtal webbläsare har "padding" samma egenskap som "margin". Marginaler i HTML anges som både "margin" och "margin width" för att det ska fungera i flera webbläsare:

leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

Samma princip gäller för CSS om du vill ange "0" som värde dvs inte ha någon marginal alls. Ange då både "margin" och "padding" för att webbläsare ska visa sidans innehåll med samma resultat:

body {margin: 0; padding: 0;}

OBS! Exemplet ovan där "padding" används gäller endast om marginalen ska ha ett "0-värde". Padding används i övrigt inte för att ange marginaler utan för avstånd mellan innehåll och yttre kanter i en box.

Om marginalen ska anges för området #box i exemplet tidigare eller för hela dokumentet i body beror ju på sidans övriga innehåll, finns bara en box i dokumentet har det ingen betydelse. Exemplen nedan ger samma resultat:

önskat avstånd 25 pixlar anges med marginal för området #box

body {margin: 0; padding: 0;}

#box {width: 300px;
padding: 25px;
margin: 25px;

önskat avstånd 25 pixlar anges med marginal för hela sidan body

body {margin: 25px;}

# box {width: 300px;
padding: 25px;}

Förkortning av koden

Koden för marginaler anges i ordningen top - right - bottom - left och kan förkortas.

Fyra likadana värden:

Istället för att ange:

margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px;

...anger du bara:

margin: 25px;

Fyra olika värden:

Istället för att ange:

margin-top: 5px; margin-right: 8px; margin-bottom: 10px; margin-left: 12px;

...anger du bara:

margin: 5px 8px 10px 12px;

Två likadana värden:

Istället för att ange:

margin-top: 5px; margin-right: 8px; margin-bottom: 10px; margin-left: 8px;

...anger du bara:

margin: 5px 8px 10px;

Två olika värden:

Istället för att ange:

margin-top: 5px; margin-right: 8px; margin-bottom: 5px; margin-left: 8px;

...anger du bara:

margin: 5px 8px;

Positionering - relativt eller absolut

Positionering av boxar kan vara statisk, relativ eller absolut förhållande till dokumentets kanter och övrigt innehåll. Om ingen position anges används "static" som alltså är standardläge (default). Exemplet nedan visar två boxar i statisk positionering. Placeringsordningen styrs av i vilken ordningsföljd boxarna angivits i sidkoden.

Box1 anges först i koden och placeras alltså före Box2:

klicka här för att se exemplet »

body {margin: 0; padding: 0;}
#box1 {width: 200px; padding: 10px;}
#box2 {width: 200px; padding: 10px;}<body>

<div id="box1">innehåll här</div>
<div id="box2">innehåll här</div>

<p>texten i ett vanligt stycke...</p>
</body>

Relativ positionering innebär att boxen placerats i förhållande till vad den skulle vara i statisk positionering. Detta innebär att boxen har en faktisk placering men i förhållande till den flyttas relativt med ett visst avstånd. Boxen tar fortfarande upp utrymmet den statiskt har och inga andra element kan placeras där. Låter krångligt men betyder att boxen bara är relativ till sig själv och inte till andra boxar och element...

Exemplet nedan är lika som ovan förutom att Box1 flyttats 50 pixlar från topp och vänsterkant och placerats relativt till sin statiska position:

klicka här för att se exemplet »

body {margin: 0; padding: 0;}

#box1 {width: 200px; padding: 10px; position: relative; left: 50px; top: 50px;}
#box2 {width: 200px; padding: 10px;}

Absolut positionering innebär till skillnad från den relativa positionen att boxen släpper sin statiska placering och låter andra element ta utrymmet. Boxen placeras ovanpå andra element (även i relativ placering) och kan liknas vid att boxen utgör ett skikt eller Lager som kan placeras över eller under andra objekt. Ordningen på skikten styr du med Z-index (se nedan).

Exemplet nedan är lika som ovan förutom att Box1 flyttats 50 pixlar och placerats absolut och släpper sin statiska position så att andra element kan ta det utrymmet:

klicka här för att se exemplet »

body {margin: 0; padding: 0;}

#box1 {width: 200px; padding: 10px; position: absolute; left: 50px; top: 50px;}
#box2 {width: 200px; padding: 10px;}

OBS! Notera att Box2 har statisk postition i exemplen ovan - det är alltså bara Box1 som positionerats relativt och absolut.

Placering över och under - Z-index

X- och y värden positionerar områden i två dimensioner och Z-index är den tredje dimensionen och genom att tilldela området ett värde för Z-index anges ordningen nerifrån och upp (stack order) Varje box ligger i en egen nivå som kan anges med en siffra - ett högre värde placerar boxen högre upp och boxen med det lägsta värdet placeras underst. Både positiva och negativa värden kan användas och om inget värde anges gäller den ordning som angivits i koden - boxar som angivits först placeras under de som angivits senare.

I exemplet nedan placeras de tre boxarna ovanför varandra genom att två av boxarna har ett värde för Z-index:

klicka här för att se exemplet »

#box1 {width: 200px;}
#box2 {width: 200px; position: absolute; left: 50px; top: 50px; z-index: 1;}
#box3 {width: 200px; position: absolute; left: 150px; top: 30px; z-index: 2;}

Float - justering i sidled

Om andra områden eller element ska finnas bredvid en box kan du använda egenskapen float för att påverka ett textflöde eller andra element och boxar. En "float" är en box som justeras till höger eller vänster längs sin nuvarande linje. OBS! Float fungerar inte om du använt absolut positionering.

Exemplen nedan visar en box utan float och en box med float och hur det påverkar den efterföljande texten som inte är placerad i någon box:

klicka här för att se exemplet »

body {margin: 0; padding: 0;}

#box1 {width: 200px; padding: 10px; float: left;}

<body>
<div id="box1">Innehåll i boxen</div>
Textrader som påverkas av float här...
</body>

Exemplet nedan använder float:left; på två boxar som gör att de placeras sida vid sida och att texten flödar till höger om Box2:

klicka här för att se exemplet »

body {margin: 0; padding: 0;}

#box1 {width: 150px; padding: 10px; float: left;}
#box2 {width: 150px; padding: 10px; float: left;}

Exemplet nedan använder float:left; på Box1 och float:right; på Box2:

klicka här för att se exemplet »

#box1 {width: 150px; padding: 10px; float: left;}
#box2 {width: 150px; padding: 10px; float: right;}

Notera att box2 ligger inom samma stycke <P> som texten:

<body>
<div id="box1">Innehåll i Box1</div>
Textrader utan formatering här...
<p>
<div id="box2">Innehåll i Box2</div>Textrader som ligger i ett stycke (paragraph) här.
</p>
</body>

Centrering av box

Centrering av boxar sker genom att använda marginalerna som får dynamiska egenskaper genom att ange värdet auto. I exemplet nedan är boxen centrerad men inte innehållet i boxen:

klicka här för att se exemplet »

body {margin: 0; padding: 0;}

#box1 {width: 200px; padding: 10px; margin-right: auto; margin-left: auto;}

Alternativ lösning för centrering av boxen

Metoden ovan är en rekommendation av W3C men fungerar inte i alla webbläsare som tex IE6 i quirks-mode. Den alternativa lösningen är istället att centrera allt innehåll på sidan i body och sedan vänsterjustera innehållet i de boxar eller andra element som påverkas.

klicka här för att se exemplet »

body {margin: 0; padding: 0; text-align: center;}

#box1 {width: 200px; padding: 10px;
margin-right: auto; margin-left: auto; text-align: left;}

Clear - kontrollera flödet

Boxar som justerats med float gör att innehåll i dokumentet flödar höger eller vänster om boxen och du kan förhindra detta genom att ange clear med attributen right - left - both. Clear förlänger toppmarginalen i ett område så att boxen hamnar under tidigare element i koden. Det kan gälla element till höger, vänster eller båda sidor om området.

I exemplet nedan är textområdet #box3 markerat med ljusgul bakgrundsfärg för att tydligare visa vilken box som har egenskapen clear. All text i #box3 hamnar i linje under #box2:

klicka här för att se exemplet »

#box1 {width: 150px; padding: 10px; float: left;}
#box2 {width: 200px; padding: 10px; float: right;}
#box3 { clear: right;}

Mer om enheter: % - em - px

Storlekar på framförallt text men även boxar (områden) kan anges med olika enheter och den vanligaste enheten för text i HTML var tidigare "size" som utgick ifrån en standardstorlek (default) och angav storlek i 7 steg (läs mer om font size i HTML grunder »). CSS ger möjlighet att skala text obegränsat och olika enheter för att ange storleken. En vanlig enhet är pixlar som även används för att ange storlek på bildskärmar och därför erbjuder bra kontroll över hur resultatet blir på en bildskärm. Problemet med pixlar är att IE och vissa andra webbläsare inte kan förstora dem om användaren vill se texten i större storlek. Den här guiden har textstorlek angiven i em och kan förstoras i både Firefox och i Internet Explorer och med tanke på framtida tillgänglighet är det en fördel - se informationen i början av guiden »

TIPS! Prova att förstora eller förminska texten i denna guide som angivits i em. Snabbkommandot i Firefox och Internet Explorer är CTRL+plus eller CTRL+minus och det finns 16-17 storlekar (återställ till standard med CTRL+0). Snabbkommandon finns inte i IE6 men du kan välja menyn "Visa/Textstorlek" där du har fem olika storlekar att välja på ("mellan" är standardvärdet). Dessutom kan du med scrollhjulet på musen CTRL+scrolla för att andra textstorlek både i Firefox och IE.

Klicka här för provsida med olika enheter »

Textstorlekar kan anges i enheterna:

px - pixlar (pixels) - samma enhet som bildskärmars upplösning
pt - Punkter (point) - 1 pt är lika med 1/72 inch
in - tum (inch)
cm - centimeter
mm - millimeter
p - picas - 1 pc är lika med 12 punkter
em - em - relativ till andra element
ex - exs - en ex är x-höjden på ett tecken
% - Procent - relativ till andra element

Enheterna "pt", "pica" och "ems" har traditionellt använts i typografin och trycksaker och det är förmodligen "punkter" (pt) som är mest allmänt använt i tex ordbehandling.

Enheten em är ursprungligen ett horisontellt mått som utgår från bredden på bokstaven "M". Två bindestreck ihop (--) kallas för "em-dash" och har samma bredd som bokstaven "M". Endast ett bindestreck (-) kallas "en-dash". Begreppet "em" har inte samma betydelse i CSS som i typografin då bokstaven "M" inte finns i alla länders teckenuppsättningar. Alla teckenuppsättningar har däremot en höjd på tecknen och "em" används i CSS som en enhet för höjd på tecken.

Enheten em är betydelsefull i CCS för att skapa skalbara dokument som fungerar även på andra enheter än PC och du bör alltså använda "em" som enhet för både text och områden (boxar). Em är relativ till andra element och utgår alltså från tidigare formatering. Om du anger textstorlek för "brödtexten" i stycken <P> till "10 pixlar" så kan du formatera alla andra element som tex radhöjd, teckenmellanrum, rubriker, storlek på boxar mm relativt till texten 10px genom att ange "em" som enhet på dessa element.

Exemplen nedan visar två boxar där en box har måtten angivna i em och därmed är skalbar proportionellt med texten som även den är angiven i em. Den andra boxen har måtten angiven i px och är alltid lika bred och ej skalbar tillsammans med texten.

Normal textstorlek vald i webbläsaren:

Större textstorlek vald i webbläsaren:

Mindre textstorlek vald i webbläsaren:

Textstorlekar i % eller em?

Skalbarhet och tillgänglighet är en av anledningarna till användning av CSS. Relativa måttenheter som % och em ska då användas. Tyvärr visar inte alla webbläsare texten korrekt om textstorleken ändras av användaren i webbläsaren (se tipsrutan ovan »). Exemplen nedan visar resultatet i IE6 och FF:

Normal textstorlek IE:

Normal textstorlek FF:

Mindre textstorlek. Felaktigt resultat i IE:

Mindre textstorlek. Korrekt resultat i FF:

Prova själv att ändra textstorleken i din egen webbläsare och se om texten visas korrekt - klicka här för att se exemplet »

Textstorlekar mindre än ca 75% blir svårlästa i IE om storleken minskas av användaren och textstorlekar angivna i em fungerar dåligt oavsett om storleken ändras uppåt eller nedåt i IE. Notera att om användaren inte ändrar standard textstorlek i webbläsaren så uppstår inte detta problem.

Layout i kolumner

Boxar kan användas som kolumner även om innehållet inte flödar mellan kolumnerna som i paginerings-program som InDesign (och även i vissa ordbehandlingsprogram). Positioneringen är i grunden likadan för kolumner men måtten och olika enheterna bör du anpassa till dina egna behov.

Grundexemplet är två kolumner med kantlinje och avstånd både mellan kolumnerna och dokumentets kanter:

klicka här för att se exemplet »

body {margin: 3%; font-family: Arial; font-size: 0.75em;

#col1 {width: 15em; float: left; padding-right: 1em; padding-left: 1em;
border-right: 1px solid #999999;}
#col2 {width: 15em; float: left; padding-right: 1em; padding-left: 1em;}

Kantlinjer på båda sidor och avstånd mellan kolumnerna (genom att kolumn1 har en högermarginal):

klicka här för att se exemplet »

#col1 {width: 15em; float: left; border-right: 1px solid #999999;
border-left: 1px solid #999999; margin-right: 1em; padding: 1em;}
#col2 {width: 15em; float: left; border-right: 1px solid #999999; border-left: 1px solid #999999; padding: 1em;}

Bakgrundsfärg i kolumner visar att boxarnas höjd är olika då de är proportionella till textinnehållet och inte har en fast höjd. Om du anger en fast höjd på en box måste innehållet alltid få plats i boxen vilket kan vara svårt att beräkna då textens storlek kan variera (detta gäller speciellt om textens storlek angivits i em eller %).

Lösningen på problemet är att lägga kolumnerna (de två boxarna) i en yttre box som då fungerar som en "behållare" - container.

Så här ser de två kolumnerna ut innan de placeras i en container - med bakgrundsfärg i båda boxarna:

klicka här för att se exemplet »

#col1 {width: 15em; float: left; padding: 1em; background: #ffde9b;
border-right: 1px solid #999999;}
#col2 {width: 15em; float: left; padding: 1em; background: #ffde9b;}

Den container som de två boxarna placeras inuti får nu även ta över bakgrundsfärgen och ingen av boxarna som utgör kolumnerna har nu sin egen bakgrundsfärg. I exemplet har containern inga fasta bredd- eller höjdmått utan värdet "auto" - innehållet i containern får då bestämma storleken:

klicka här för att se exemplet »

body {margin: 20px; font-family: Arial; font-size: 0.75em;}

#container {width: auto; background: #ffde9b; float: left;}
#col1 {width: 15em; float: left; padding: 1em; border-right: 1px solid #999999;}
#col2 {width: 15em; float: left; padding: 1em;} <body>
<div id="container">
<div id="col1">Text i kolumn 1</div>
<div id="col2">Text i kolumn 2</div>
</div>
</body>

Läs mer om CSS-layouter här  »