Placer HTML-sidens indhold med float

Indlæs andet indhold på denne side:

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.

Spalter

Siden er opdateret 12. 12. 2005

Hvis dine ønsker går i retning af at lave spalter på dine sider, kan dette også laves med float. Du starter med at oprette det ønskede antal <div></div>'er, som skal udgøre rammerne for dine spalter.

Derefter skal disse <div></div>'er tildeles bredde og mellemrum. Hvis siden skal være fleksibel - kunne ses i alle bredder browservindue - skal du definere bredderne på spalter og mellemrum i procenter.

Men vær opmærksom på, at det samlede antal % ikke kan komme op på hundrede, ellers får du problemer med, at nogle browsere smider den sidste spalte ned under den første. Regn med, at du skal holde dig i omegnen af 90 %.

Dette er den venstre spalte af tre.

Dette er den midterste spalte af tre.

Dette er den højre spalte af tre.

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

<p style="float:left; width:28%; margin-right:2%; 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 12% 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.

^ Tilbage til sidens top


Venstre og højre spalte plus indhold

Dette er den højre spalte af tre.

Dette er den venstre spalte af tre.

Dette er den midterst spalte af tre.
Vi skal have noget tekst, der kan give noget højde. Vi skal (også ved stor browserbredde) kunne se, at teksten ikke breder sig til siderne - ud under de grå bokse.

Denne opsætning med to smalle spalter i siderne til menuer og den slags og en bredere boks i midten til det egentlige sideindhold laves på denne måde:

<div style="width:100%;">
<p style="float:right; width:150px; margin-top:0;">Dette er den højre spalte af tre.</p>

<p style="float:left; width:150px; margin-top:0;">Dette er den venstre spalte af tre.</p>

<p style="padding-left:160px;padding-right:160px; margin-top:0;">Dette er den midterst spalte af tre.</p>
</div>

Ved at sætte margin-top:0 på alle tre spalter, kommer deres overkanter til at stå præcist på linje.

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Hjemmesideskolen juli 2003
Hjemmesideskolen
Du er her: Forsiden - html - Placer elementer på siden med float
Brugere lige nu: 1
Home Mail