[ Forrige | Indhold | Næste]

Lektion 13: Flydende elementer (floats)

Et element kan flyde til højre eller venstre med egenskaben float. Det vil sige at boksen med indhold (se evt. lektion 9 om boksmodellen) enten flyder til højre eller venstre i dokumentet. Følgende illustration viser princippet:

Der kunne f.eks. være tale om et billede og noget tekst - hvilket ville give dette resultat:

Hvordan gør man?

Med udgangspunkt i eksemplet med Bill Gates ovenfor kan vi kigge på følgende kode:

<div id="billede">
<img src="bill.jpg" alt="Bill Gates">
</div>

<p>causas naturales et antecedentes, 
idciro etiam nostrarum voluntatum...</p>
...

For at få billedet til at flyde til venstre, og teksten til at omslutte billedet, skal man blot i sit stylesheet definere en bredde for den boks der omgiver billedet, og derefter sætte egenskaben float til left:

#billede {
	float:left;
	width: 100px;
}

 Vis som eksempel

Et andet eksempel: spalter

Floats kan bl.a. anvendes til at lave spalter i et dokument. For at lave spalterne skal man blot strukturere de ønskede spalter i HTML-koden med <div> på følgende måde:

<div id="spalte1">
<p>Haec disserens qua de re agatur 
et in quo causa consistat non videt...</p>
</div>

<div id="spalte2">
<p>causas naturales et antecedentes, 
idciro etiam nostrarum voluntatum...</p>
</div>

<div id="spalte3">
<p>nam nihil esset in nostra 
potestate si res ita se haberet...</p>
</div>

Herefter sættes bredden af spalterne til den ønskede bredde - f.eks. 33% - hvorefter man blot floater hver spalte til venstre ved at definere egenskaben float:

#spalte1 {
	float:left;
	width: 33%;
}
#spalte2 {
	float:left;
	width: 33%;
}
#spalte3 {
	float:left;
	width: 33%;
}

 Vis som eksempel

float kan antage værdierne left, right eller none.

Egenskaben clear

Med clear er det muligt at kontrollere hvilken effekt det skal have på dokumentets øvrige elementer, at et element flydes til højre eller venstre.

Som standard flytter de efterfølgende elementer jo op og optager den plads, som måtte blive ledigt når en boks flydes til en af siderne. Se f.eks. eksemplet ovenfor hvor teksten automatisk rykker op ved siden af billedet af Bill Gates.

Egenskaben clear kan antage værdierne left, right, both eller none. Princippet er at hvis clear sættes til f.eks. both for en boks, vil den øverste margengrænse for denne boks altid være under den nederste margengrænse for eventuelle flydende bokse ovenfor.

<div id="billede">
<img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="flydestop">causas naturales et antecedentes, 
idciro etiam nostrarum voluntatum...</p>
...

For at undgå at teksten flyder op ved siden af billedet kan vi tilføje følgende til vores CSS:

#billede {
	float:left;
	width: 100px;
}
.flydestop  {
	clear:both;
}

 Vis som eksempel

Browser-kompatibelitet

Stort set alle browsere understøtter det du lige har lært. Hvis du er i tvivl kan prøve dig frem, eller referere til nedenstående tabel:

Tabellen viser fra og med hvilken version browseren understøtter den pågældende egenskab.

Opsummering

Floats er velegnede i mange sammenhænge, og kan ofte suppleres med positionering. I den næste lektion kigger vi nærmere på hvordan man positionerer en boks relativt eller absolut.

[ Forrige | Indhold | Næste]