Flytande element i Firefox
Innan jag lärde mig bemästra de flytande elementens mysterium i Firefox, orsakade strukturerandet av sidlayouter ganska mycket huvudbry.
Har du någon gång råkat ut för, eller sitter du kanske nu fast i problemet att Firefox inte lägger bakgrunden över hela din sidlayout? Den blir liksom kvar i en smal remsa högt upp på sidan. Häng med så förklarar jag närmare vad jag menar och hur du löser det.
Floats
Flytande element, d.v.s. element som ligger bredvid varandra, uppnås genom att man använder egenskapen float med värdet left eller right. Element efter det flytande elementet, flyttas upp jämsides och följer det flytande elementet tills det tar slut. Därefter kan innehållet åter ta föräldraelementets fulla plats i bredd.
Låt oss säga att du vill åstadkomma en sidlayout där man lägger <div>-element som i bilden ovan. Två spalter (huvudinnehåll och navigerings- eller puffspalt) och under dessa två en sidfot. Du har antagligen också en <div> som omsluter och håller allt på plats.
Problemet med den här modellen brukar visa sig i Firefox, som uppenbarligen inte har samma metod för att lägga ut hela härligheten. När du börjar fylla på med text visar det sig att din omslutande div INTE vill följa innehållets höjd dynamiskt. Sidfoten under innehållssektionerna flyttar sig inte heller en millimeter.
Lösningen då? Tack och lov är den mycket enkel när man väl känner till den. Du måste nu använda dig av egenskapen clear, som tar något av värdena left, right eller both. Egenskapen kan du t.ex. sätta till sidfotens <div>, om det är det första elementet som ska ligga under dina två spalter.
Fungerar inte det, kan det också vara praktiskt att skapa en speciell <div>-klass som är tom och som du enkom sätter in i strukturen för att bryta av där float förorsakat Firefox-knas.
div.bryt {clear:both; width:1px; height:1px}
2009-05-19 (9:28)
XHTML och CSS
