Instruktioner

Tänk på att CSS-koden för dessa layouter har en stor mängd kommentarer. Om du gör merparten av ditt arbete i designvyn kan du titta på koden och få tips om hur du arbetar med CSS för fasta layouter. Du kan ta bort kommentarerna innan du publicerar din webbplats. Om du vill lära dig mer om de tekniker som används i CSS-layouterna kan du läsa den här artikeln på Adobe Developer Center – http://www.adobe.com/go/adc_css_layouts.

Rensa

Eftersom alla kolumner är flytande används overflow:hidden på behållaren (.container) i den här layouten. Denna rensningsmetod tvingar behållaren att läsa av var kolumnerna slutar för att kunna visa eventuella kanter och bakgrundsfärger som du angett i behållaren. Om du har ett stort element som sticker ut ur behållaren kommer det att se avhugget ut. Du kommer inte heller att kunna använda negativa marginaler eller absolut positionering med negativa värden för att dra ut element ur behållaren, eftersom de då inte heller visas utanför behållaren.

Om du behöver utnyttja de här egenskaperna måste du använda en annan rensningsmetod. Den mest pålitliga är att lägga till en <br class="clearfloat" /> or <div class="clearfloat"></div> efter den sista flytande kolumnen (men innan behållaren avslutas). Det ger samma rensande effekt.

Sidfot

Om du lägger till en sidfot efter kolumnerna, men fortfarande inuti behållaren, leder det till att den här rensningsmetoden med overflow:hidden misslyckas. Du kan placera en sidfot (.footer) i en andra behållare utanför den första utan några negativa följder. Det enklaste kan vara att börja med en layout med sidhuvud och sidfot och sedan ta bort sidhuvudet för att kunna dra nytta av rensningsmetoderna i den layouttypen.

Bakgrunder

Bakgrundsfärgen på en div fungerar så att den bara visas för innehållets längd. Det innebär att om du skapar en sidokolumns utseende med hjälp av en bakgrundsfärg eller kant, så kommer den inte att sträcka sig ända ner till sidfoten utan slutar där innehållet slutar. Om innehålls-diven alltid har mer innehåll kan du placera en kant på innehålls-diven för att skilja den från kolumnen.