Den här artikeln förklarar hur man bygger en layout med 3 kolumner i CSS. Instruktioner gäller CSS3 och äldre.

Rita din layout

Du kan rita din layout på papper eller i en grafikprogram. Om du redan har en trådram eller ännu mer omfattande design i åtanke, förenkla den till de grundläggande rutorna som utgör webbplatsen. Denna design som åtföljer den här artikeln har tre kolumner i huvudinnehållsområdet, samt en sidhuvud och sidfot. Om du tittar noga kan du se att de tre kolumnerna inte är lika breda.

När du har ritat din layout kan du börja tänka på dimensioner. Detta exempel på design kommer att ha följande grundläggande dimensioner:

• Högst 900 pixlar breda
• 20 px rännsten till vänster
• 10 px mellan kolumner och rader
• Kolumner som är 250px, 300px och 300px breda
• Den översta raden är 150 pixlar lång
• Den nedre raden är 100 pixlar lång

Skriv grundläggande HTML / CSS och skapa ett behållarelement

Eftersom den här sidan är giltig HTML börja med en tom HTML-behållare.

Lägg till de grundläggande CSS-stilarna till nollställa sidmarginalerna, ramarna och stoppningarna. Medan det finns andra standard CSS-stilar för nya dokument är dessa stilar det minsta du behöver för att få en ren layout. Lägg till dem i dokumentets huvud.

För att börja bygga layouten, lägg i ett containerelement. Ibland händer det att du kan bli av med behållaren senare, men för de flesta layouter med fast bredd blir det lättare att hantera behållarelementet på olika webb med containerelementet. webbläsare.

Forma behållaren

Behållaren definierar hur bred webbsidans innehåll kommer att vara, liksom eventuella marginaler runt utsidan och vaddering på insidan. För detta dokument är behållaren 870 pixlar bred med en 20-pixel rännsten till vänster. Rännan är inställd med marginalstil, men stoppningen på behållaren nollställs för att förhindra att några element blir lika breda som behållaren.

Om du sparar ditt dokument nu blir det svårt att se behållaren eftersom den inte har något i den. Om du lägger till platshållartext kan du se containerelementet tydligare.

Använd en rubrikmärke för rubriken

Hur du bestämmer dig för att utforma rubrikraden beror mycket på vad som finns i den. Om rubrikraden bara kommer att ha en logotyp och rubrik använder du en rubriktagg (

) är vettigare än att använda a

. Du kan utforma rubriken på samma sätt som du utformar en div och undvika främmande taggar.

HTML för rubrikraden går längst upp i behållaren och ser ut så här:

För att ställa in stilarna på den tillsattes en röd kant i botten så att du kunde se var den slutade, marginalerna och stoppningen nollställts, bredden satt till 100% och höjden till 150 pixlar.

Glöm inte att flyta detta element med flottören: vänster; fast egendom. Nyckeln till att skriva CSS-layouter är att flyta allt, även saker som har samma bredd som containern. På det sättet vet du alltid var elementen ligger på sidan.

A CSS ättling väljare tillämpade stilar endast på H1-element som finns i elementet #container.

För att få tre kolumner, börja med att bygga två kolumner

När du bygger en layout med tre kolumner med CSS måste du dela din layout i grupper om två. Så för denna tre-kolumn layout, den mellersta och högra kolumnen och grupperas och placeras bredvid den vänstra kolumnen i en två-kolumn layout där den vänstra kolumnen är 250 pixlar bred och den högra kolumnen är 610 pixlar bred (300 vardera för de två kolumnerna plus 10 pixlar för rännan mellan dem).

Kolumnen till vänster svävs till vänster, medan den andra svävas till höger. Eftersom den totala bredden på båda kolumnerna är 860 pixlar, finns en rännsten på 10 pixlar mellan dem.

Lägg till två kolumner i den breda andra kolumnen

För att skapa de tre kolumnerna lägger du till två divs i den bredare andra kolumnen, precis som du lade till 2 divs inuti behållarkolumnen i det sista steget.

Eftersom dessa två 300px breda lådor finns i en 610px bred låda kommer det återigen att finnas en 10px rännsten mellan dem.

Lägg till i sidfoten

Nu när resten av sidan är utformad kan du lägga till i sidfoten. Använd en sista div med "footer" id och lägg till innehåll så att du kan se det. Du kan också lägga till en kant högst upp så att du vet var den börjar.

Lägg till dina personliga stilar och innehåll

Nu när layouten är klar kan du börja lägga till dina egna personliga stilar och innehåll. Kom ihåg att ramarna på sidhuvudet och sidfoten lades till för att visa layoutavsnitten, inte specifikt för design.