Layout

Om du provat att lägga två div-boxar direkt efter varandra, har du säkert märkt att de inte vill ligga på samma rad oavsett hur breda de är. Detta beror på att förvalet för alla box-element är att de ska starta på en egen rad och fylla upp 100 % av tillgänglig bredd. Detta gör det ju väldigt svårt att få till en bra layout, turligt nog finns det CSS-egenskaper som kan vara till hjälp här!

Vi ska först gå igenom den klassiska metodiken för att skapa webblayout. Det finns dock ett modernare och bättre sätt som man kan skapa layout på. Dock är den klassiska metodiken så vanligt förekommande, att det är ett måste att kunna denna oxå.

float

Med hjälp av egenskapen float kan vi säga att ett element ska tas ur det "vanliga" layoutflödet och placeras enligt våra önskningar. Förvalet är att float är satt till none, dvs element ska ligga med i det vanliga layoutflödet.

Om vi sätter något av de övriga möjliga värdena på float kommer det dock att hända saker.

left

Om vi sätter float till left kommer elementet att förflyttas så långt åt vänster att det antingen hamnar på vänstra kanten av föräldraelementet eller på högra sidan av föregående element som även det har egenskapen float satt till något annat än none. Det vill säga elementen flyter mot vänster sida, så långt de kan tills något "tar emot". När deras föräldraelement blir "fullt" kommer de efterföljande, flytande elementen att hamn en rad neråt.

På detta vis kan vi bygga upp en layout som består av flera flytande boxar som ligger bredvid varandra.

right

Detta float-värde fungerar precis som ovanstående, fast istället för att flyta åt vänster så flyter allting åt höger till.

clear

När vi börjar manipulera layoutflödet med hjälp av flytande boxelement kommer vi snart att hamna i en situation där saker flyter lite mer än man vill. Låt säga att du vill att två boxar ska flyta, men den tredje ska hamna under dem. Om du enbart använder float måste du manipulera de första två boxarnas bred, så att de "puttar" ned den tredje. Men det finns ett enklare och vettigare sätt att göra detta.

Med hjälp av CSS-egenskapen clear kan vi styra hur saker ska flyta. Egenskapen styr huruvida ett element kan ligga bredvid andra flytande element eller ej. Egenskapen går att använda såväl på flytande, som fasta element. Om man använder det på ett fast element, så förflyttas elementet så det hamnar efter alla flytande element. Om det används på ett flytande element så förflyttas elementet ner så långt att den angivna kanten är fri ifrån andra flytande element.

Man kan ange några olika värden för egenskapen.

both

Det får inte förekomma någonting flytande på någon sida av elementet. Elementet förflyttas så långt ner att det ligger "ensamt".

left

Det får inte förekomma något flytande element på vänstra sidan. Elementet flyttas ned så långt att dess vänstra sida är "ren" ifrån andra flytande element.

right

Precis som ovanstående, fast nu gällandes den högra sidan.

Problem med layoutflödet

Var försiktig med hur du blandar element som flyter med sådana som inte gör det. Det är lätt att man lyckas åstadkomma element som täcker varandra på ett sätt som inte var meningen.

Vanligtvis försöker alla blockelement att sätta en storlek som täcker in allt innehåll som finns i dem (om vi inte sätter width eller height explicit vill säga). När vi använder float lyfts dock de flytande elementen ur det normala layoutflödet och därför kommer de inte att räknas som en del av innehållet i föräldraelemetet. Detta kan orsaka en hel del problem. En enkel lösning kan vara att även sätta float på föräldraelementet. Men i många fall varken kan eller vill man göra det. Då måste vi ta till en så kallad "clear fix". Det finns många varianter av denna fix, men om du lägger till följande kod i ditt stylesheet och sedan lägger till klassen clearfix till de blockelement som kräver en fix så bör allt fungera bra.

.clearfix::after { 
   content: "";
   display: block; 
   clear: both;
}

Tyvärr är det rätt vanligt förekommande att man behöver ta till dylika fullösningar för att få till exakt det beteende man är ute efter. Tack och lov blir webbstandarderna allt bättre och det krävs mindre och mindre extraarbete.