Flytande element

När element görs flytande, förändras elementens naturliga sätt att läggas ut på sidan till viss del. Det här används t.ex. för att få två blockelement att ligga bredvid varandra, vilket de annars inte kan, eller när man figursätter bildobjekt i text.

Egenskapen som används här heter float och den kan ha tvÃ¥ värden – left eller right. Värdet väljs utefter vilken sida elementet ska placeras pÃ¥. Element som strukturellt ligger efter detta element kommer dÃ¥ att lägga sig jämsides med det flytande elementet.

Vill man t.ex. att tvÃ¥ styckeelement ska ligga bredvid varandra som tvÃ¥ textspalter, kan man skapa en klass för varje spalt. Den första spalten fÃ¥r float:left, vilket gör att den andra lägger sig intill högerkanten pÃ¥ den första.

p.spalt1 {float:left; width:200px}
p.spalt2 {width:200px}

Hantera text efter flytande element

Alla element som kommer efter ett flytande element, följer det flytande elementets ena sida tills den tar slut. Först då flyttas text och andra element ut mot sidmarginalen (förälderns sida).

Om man vill tvinga ett pÃ¥verkat element att flyttas ner tidigare, kan man använda egenskapen clear. Denna egenskap kan ha nÃ¥got av de tre värdena left, right eller both. Värdet väljs utefter vilken sida som ska vara fri frÃ¥n flytande element innan det aktuella elementet flyttas ner.

Detta kan man göra direkt i html-dokumentet (direkt CSS) eller som en klass.

.bryt {clear:both}       /*PÃ¥verkar alla element med klassen bryt*/

<h3>        /*Element med klassen bryt*/

<h3 style="clear:both">  /*Direkt CSS, påverkar endast detta element*/