Oversigt over modellerne Layouteksempel 1 Layouteksempel 1a Layouteksempel 2 Layouteksempel 2a Layouteksempel 3 Layouteksempel 3a Layouteksempel 4 Layouteksempel 4a

Lidt pynt på det simple med stylesheet

Også layoutforslag 2 kan eftergøres på en meget simplere måde, ved hjælp af et stylesheet:

  #indhold {
    margin:10px 10px 10px 200px;
    border:1px solid black;
    background:white;
  }
  #indhold h1, #indhold p, #indhold pre {
    margin:10px;
  }
  #leftcol {
    width:180px;
    float:left;
    text-align:right;
    border:1px solid black;
    background:white;
  }
  #leftcol p{
    margin:10px;
  }
  

Jeg bruger det samme stylesheet som i eksempel 1a, men har tilføjet nogle yderligere formregler.

Bemærk, at jeg sætter marginer på kassernes indhold. I teorien kan det samme opnås ved at give kasserne en padding. Gør vi det, tvinges vi imidlertid til at forholde os til, at Internet Explorer og Netscape fortolkning en sådan padding højst forskelligt. Derfor:

Når du laver kasser med CSS, skal du altid så vidt muligt sætte margin på kassernes indhold, snarere end at give kasserne en padding.

Er du nødt til at arbejde med padding, bør du nok sætte dig ind, hvad det er, Internet Explorer gør forkert. Det kan du læse om på websiden Problemer med Internet Explorer 5.x & 6 og CSS boksmodellen.