Placer HTML-sidens indhold med float
En let og fleksibel måde at anbringe elementer på en html-side på er, at man anvender css-elementet float - eventuelt i kombination med elementet clear.
Billeder og tekst
Siden er opdateret 12. 12. 2005
Dette billede er et maleri, jeg selv har malet. Det måler 90 × 60 cm. og motivet er hentet i Dragør.
Hvis du som her vil anbringe et billede på siden og vil have teksten til at lægge sig uden om billedet, kan du bruge float på billedet og så bare lægge teksten ved siden af. Når tekstblokken kommer ned under billedet, vil teksten automatisk brede sig ind under billedet, sådan som du ser her. Det er så kun et spørgsmål om, at der med margin-bottom skal sættes en grænse for, hvor tæt op under billedet teksten må brede sig ind under. Hvis du ikke ser teksten brede sig ind under billedet, så prøv at gøre dit browservindue smallere. Hvis dit vindue er max. 1024 px bredt, skulle det i hvert fald ske.
<div>
<p style="float:left; margin-right:15px; margin-bottom:10px; margin-top:0px"><img src="billede.jpg" width="100" height="67" alt="" /></p>
<p style="margin-top:0px">Her skrives teksten</p>
</div>
Det hele anbringes i en <div></div>, så er der samling på det. Tekst skal som bekendt sættes ind i en <p></p>, så vi gør det samme med billedet. Det gør det lettere at styre layoutet.
I <p></p> om billedet sættes i inline-css margin-right:15px; margin-bottom:15px, så der bliver lidt luft omkring billedet. Desuden sættes float:left, der gør, at efterfølgende elementer i koden lægges til højre herfor.
I begge <p></p>'er sættes desuden margin-top:0px. Det er en tilpasning, så det ser ens ud i alle browsere - ellers kan der være lidt højdeforskel på billedets og tekstens overkanter.
Man kan selvfølgelig også lægge billedet til højre på siden. Så skal der bare i stedet defineres float:right; margin-left:15px; margin-bottom:10px; margin-top:0px.
Når man har anbragt elementer på siden med float, skal man undertiden efterfølgende anbringe elementer, der skal fylde hele sidens bredde. Det er så nødvendigt at tildele dette første efterfølgende element definitionen clear med værdien left eller right - afhængig af, hvilket af de ovenover anbragte elementer, der når længst ned på siden. Hvis der på grund af forskellig browserbredde tvivl om, hvilket element, der vil være længst i brugerens aktuelle visning, kan man bruge værdien 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.
Uden clear ville teksten lægge sig oppe under den foregående tekst til højre for billedet.
<p style="clear:left">Tekst</p>
