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.
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.
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.