float

Siden er opdateret 20. 12. 2011

Egenskaben float bruges til at få bredde-begrænsede boks-level elementer til at lægge sig side om side i den udstrækning browservinduets indre bredde tillader det.

Eksempel på elementer anbragt med float:left og float:right

<div>
<p style="float:right;margin-left:15px;"><img src="images/maleri.jpg" width="100" height="67" alt=""></p>
<p style="float:left;width:70%;">Tekst til billedet</p>
</div>

Hvis det venstre float sættes først, kan man komme ud for, at det højre lægger sig under det venstre. Sættes det højre først, undgår man det problem.

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.

I dette eksempel bestemmes bredden på det højre float til (billedet + lidt luft). Det venstre float tildeles en bredde, som er mindst (billedet + 'luften') mindre end 100%.


Eksempel, hvor begge elementer tildeles float:left

<div>
<p style="float:left;margin-right:15px;"><img src="images/maleri.jpg" width="100" height="67" alt=""></p>
<p style="float:left;width:70%;">Tekst til billedet</p>
</div>

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.

I dette eksempel bestemmes bredden på det venstre float til (billedet + lidt luft). Det højre float tildeles en bredde, som er mindst (billedet + 'luften') mindre end 100%.


Eksempel, hvor kun det venstre element tildeles float:left

<div>
<p style="float:left;margin-right:15px;height:77px;"><img src="images/maleri.jpg" width="100" height="67" alt=""></p>
<p>Tekst til billedet</p>
</div>

Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.

Vi ser her, hvordan eventuel tekst længere nede end billedets underkant i den venstre float går helt hen til sidens venstre kant og dermed ind under billedet. På denne måde kan man helt undvære at lægge sideindholdet i tabeller for at styre sidens design. Denne effekt får man ikke, hvis man lægger et float:left på teksten. I så fald vil teksten bare fortsætte nedad i den afstand fra venstre kant, som den startede i. Endvidere skal der ikke sættes en bredde på teksten, når der ikke er sat en float på. Teksten tilpasser sig den til rådighed værende plads.

^ Tilbage til sidens top


Eksempel på spalter med float

Dette er den venstre spalte af tre.

Dette er den midterste spalte af tre.

Dette er den højre spalte af tre.

Denne effekt er opnået ved at definere tre floats, der ligger mod venstre. Alle tre floats har fået tildelt en bredde på 29% af den fulde sidebredde og de to floates længst mod venstre har desuden fået tildelt en højre margen på 1%:

<div>
<p style="float:left; width:28%; margin-right:1%; background:#eee; color:black; border:1px solid #ccc; padding:10px;">Venstre spaltes tekst her</p>

<p style="float:left; width:28%; margin-right:1%; background:#eee; color:black; border:1px solid #ccc; padding:10px;"><Midterste spaltes tekst her;/p>

<p style="float:left; width:28%; background:#eee; color:black; border:1px solid #ccc; padding:10px;">Højre spaltes tekst her</p>
</div>

Dette ligner godt nok en regnefejl - der mangler 11% i, at vi får udnyttet hele sidens bredde, men sådan er det bare. Dvs. sidder du med en MSIE 5.5 eller ældre, oplever du, at de tre spalter ikke udnytter hele bredden.

Du kan evt. undlade at sætte border på og hvis du også undlader at lave background (+ color), kan du også undlade at sætte padding på. Du kan så nøjes med at sætte float, width og margin-right.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - float
sidens top
Brugere lige nu: 1
Home Mail