HTML-logo   Kolonnebokse i HTML-sider




Det er typisk for HTML-sider, at den del der indeholder brødteksten, desuden har en eller flere kolonner opbygget i hver sin <div>-box. En eller flere eller alle kolonnerne kan have fast eller variabel højde.


Styringen af om en kolonne har fast højde eller ikke styres alene af om der via CSS er knyttet en "height"-deklaration til den.



Variabel /Fast højde


Når kolonnebokse skal placeres ved siden af hinanden skal de alle indlejres i en udenomliggende "content"-box.


I en kolonneboks med fast højde (oftest identisk med "Content"-boksen) kan indlejres 2 typer kolonner: "float"-kolonner og "center"-kolonner.


"Float"-kolonner flyder via CSS-styring mod venstre eller højre side i den kolonne-boks, de er placeret i. Mere end en float-kolonne kan flyde til samme side. Deres rækkefølge bestemmes da af rækkefølgen i HTML-koden.


"Center"-kolonnen skal kodemæssigt placeres efter den sidste float-kolonne. En centerkolonne kan kun anvendes, når der er float-kolonner på begge sider af den og de er lige brede.


Allernederst i en kolonneboks, der indeholder float-kolonner, skal der placeres en clear-boks lige over kolonne-boksens slut-tag.


2 venstre kolonner.

Indlejring af to float-kolonner til venstre i "content"-boksen". Kolonne 2 kunne i stedet være indlejret til højre.


HTML
<div id="content"> <!--Content boks start -->
   <div id="floatv1"> <!--Floatleft kolonne 1 start -->
      .
   </div> <!-- Floatleft kolonne 1 slut -->

   <div id="floatv2"> <!--Floatleft kolonne 2 start -->
      .
   </div> <!-- Floatleft kolonne 2 slut -->
<div class="clearleft"></div> <!-- start/slut clearleft-->

</div> <!-- Content boks slut -->
CSS ydre boks
#content {
width: nnnpx;
height: nnnpx;
background: #xxx;}
CSS Float kolonne 1
#floatv1 {
width: nnnpx;
height: nnnpx;
float: left;
background: #xxx;}
CSS Float kolonne 2
#floatv2 {
width: nnnpx;
height: nnnpx;
float: left;
background: #xxx;}
Clearboks
.clearleft{clear: left;}


Venstre, center og højre kolonne.

Indlejring af tre float-kolonner. Venstre og højre kolonne floates til hver sin side. Centerkolonnen er floatet til højre. Den kunne ligeså godt være floatet til venstre. Det vigtigste er, at kolonnekoderne indbyrdes placeres således, at der bliver fyldt op udefra fra den ene eller begge sider.


HTML
<div id="content"> <!--Content boks start -->
   <div id="floatv"> <!--Float kolonne venstre start -->
      .
   </div> <!-- Float kolonne venstre slut -->

   <div id="floath"> <!--Float kolonne højre start -->
      .
   </div> <!-- Float kolonne højre slut -->

   <div id="center"> <!--Center kolonne start -->
      .
   </div> <!-- Center kolonne slut -->

<div class="clearboth"></div> <!-- start/slut clearboth-->
</div> <!-- Content boks slut -->
CSS ydre boks
#content {
width: nnnpx;
height: nnnpx;
background: #xxx;}
CSS Float kolonne venstre
#floatv {
width: nnnpx;
height: nnnpx;
float: left;
background: #xxx;}
CSS Float kolonne højre
#floath {
width: nnnpx;
height: nnnpx;
float: right;
background: #xxx;}
CSS center kolonne
#center {
width: nnnpx;
height: nnnpx;
float: right;
background: #xxx;}
Clearboks
.clearboth{clear: both;}


Mere end tre kolonner.

Der kan indsættes lige så mange kolonner det skal være, blot "udefra"-princippet overholdes.



Clear


For at fortælle browseren, at nu er der ikke flere kolonner der skal placeres ved siden af hinanden skal der afsluttes med en 'clear'-selektor før den omkransende box forklades.

Der er intet til hinder for altid at benytte "clear: both;".
x
x