Eksempler på brug af float og clear

Siden er opdateret 23.1.2008

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


Eksempler på brug af clear

<div>
<p style="float:left;margin-right:15px;"><img src="billede.gif width="100" height="67" alt=""></p>
<p style="float:left;">En hel masse tekst til billedet</p>
</div>
<p style="clear:left;">Mere tekst til billedet</p>

Når du skal vælge, om du skal bruge clear:left eller clear:right, så se på hvilket float ovenover, der er længst. Sæt dit clear til at gå under det længste float.

Hvis der er usikkerhed om, hvilken float der er længst - den ene indeholder måske et billede, som selvfølgelig har fast størrelse, mens den anden er længere eller kortere afhængig af størrelsen på browservinduet, kan du bruge clear:both.

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

Denne tekst er med clear:left sat til at lægge sig længere nede end billedet til venstre herover.


Lægges der en border eller baggrund på den omgivende boks, er det nødvendigt at lægge en clear ind i boksen, hvis teksten ikke kan fylde ud, ned forbi billedet.

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

Den indsatte clear kan uden problemer være tom.

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

<div style="margin-top:15px;border:1px solid #eee;">
<p style="float:left;margin-right:15px"><img src="billede.gif width="100" height="67" alt=""></p>
<p style="float:left;">En hel masse tekst til billedet</p>
<p style="clear:left;"></p>
</div>

En alternativ mulighed kunne være at sætte en min-height lig med billedets højde på den omgivende boks. Et andet alternativ er at bruge clear-fix, som jeg har beskrevet herunder.


Eksempler på brug af clearfix

<div style="color:black;background:#eef;>
<p style="float:left;margin-right:15px"><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.

Som du kan se, går det galt, hvis teksten ikke fylder nok til at gå ned forbi billedet. Man må så lave en lille tilføjelse:

I css:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Skjul for IE-mac \*/
/* html */.clearfix {
height: 1%;
}
/* Slut på Skjul for IE-mac */

I html: <div class="clearfix" ... >

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

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen marts 2003
Hjemmesideskolen
Du er her: Forsiden - html - testsider - Eksempler på brug af float og clear
sidens top
Brugere lige nu: 1
Home Mail