3 lige høje spalter med CSS

De principper, der anvendes til at få to spalter til at synes lige høje, kan også anvendes i et 3-spaltet format.

Denne artikel er et addendum til artiklen Webside layout med float-egenskaben, som afsluttes med et par eksempler på, hvordan du kan få to float'ede kolonner til at synes lige høje.

Sidehoved

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sidefod

Det 3-spaltede layout er vældig populært, så derfor har jeg også lavet et eksempel på denne model, eksempel 1.

Jeg bygger videre på samme model, som jeg har brugt i de sidste par eksempler i artiklen Webside layout med float-egenskaben, men det er klart, at der skal et par div'er mere i spil i kildekoden og nogle flere formdeklarationer.

Html-kildekoden til den 3-spaltede model er som vist herunder:

<div id="side">
  <div id="banner">
  <h1>Sidehoved</h1>
  </div>
  <div id="ydreboks">
    <div id="indreboks">
      <div id="container">
        <div id="content">
          <div id="leftcol">
          [ Menu ]
          </div>
          <div id="indhold">
          [ Artikelindhold ]
          </div>
        </div>
      </div>
      <div id="rightcol">
      [ Infopanel ]
      </div>
      <div class="clb">&nbsp;</div>
    </div>
  </div>
  <div id="footer">
  [ Sidefod ]
  </div>
</div>

Det, du skal gøre dig klart som formålet med alle disse div'er er, at #ydreboks og #indreboks er de to elementer, der i virkeligheden tegner de smalle spalters baggrund, i det aktuelle tilfælde en spaltestreg.

De væsentlige dele af det stylesheet, der formaterer alle disse div'er, er:

#ydreboks {
  background-color: white;
  background-image: url(leftcolbg150.png);
  background-repeat: repeat-y;
  background-position: left top;}

#indreboks {
  background-image: url(rightcolbg200.png);
  background-repeat: repeat-y;
  background-position: right top;}

#container {
  width: 100%;
  float: left;
  margin-right: -200px;
  background-image: url(rightcolbg200.png);
  background-repeat: repeat-y;
  background-position: right top;}

#content {
  margin-right: 200px;
  background-image: url(leftcolbg150.png);
  background-repeat: repeat-y;
  background-position: left top;}

#indhold{
  margin-left: 150px;
  background-color:white;}
  
#leftcol {
  width: 150px;
  float: left;}

#rightcol {
  width: 200px;
  float: right;}
  
.clb {
  height: 0;
  clear: both;
  font-size:0;}

Med så mange div'er, der hver spiller en vigtig rolle, er det afgørende nødvendigt at du holder styr på hvornår de skal afsluttes. Som en mulig hjælp har jeg i kildekoden til eksempel 2, som jeg gennemgår herunder, indsat HTML-kommentarer ved hver afslutning af en div.

Problemer med IE

Hvis du betragter eksempel 1 med Internet Explorer vil du hurtigt opdage, at der er noget fidlihut med body-markørens grå baggrund. Den grå baggrund flyder ind over den hvide indholdsspalte. Hvis du ikke umiddelbart kan se det, skal du prøve at ændre lidt på størrelsen af dit browservindue. Så får du i hvert fald syn for sagen.

Jeg var temmelig længe om at opdage den effekt, for som regel er den midterste spalte i praksis ret meget længere end den højre spalte, og så ses effekten ikke. Effekten er heller ikke synlig i andre browsere end IE, og den er heller ikke synlig medmindre #indhold-elementet har en anden baggrundsfarve end sidens øvrige elementer, specielt body-markøren.

Jeg var længe om at opdage det, men jeg var også længe om at få forklaringen og løsningen på denne effekt.

Fejlen skyldes, at IE kun gentegner et element ved window resize dersom elementet har “layout”. Det er en egenskab, som visse html-elementer har, men som man ikke kan sætte i et stylesheet. Betingelsen for at et element anses for at have “layout” i Internet Explorer er, at det er i besiddelse af visse andre CSS-egenskaber, jf. artiklen On having Layout.

Jeg skylder Ingo Chao tak for en udførlig redegørelse for disse fænomener som svar på en posting på CSS Discuss.

I den oprindelige grundkonstruktion, ovennævnte eksempel 1, har #ydreboks-elementet og #indreboks-elementet ingen af disse CSS-egenskaber.

Der er forskellige løsninger på dette problem. Den jeg har valgt, i forbindelse med en revision af denne artikel i foråret 2007, beror på udnyttelsen af metoder og egenskaber, som Microsoft selv har udviklet, og som er neutrale i forhold til alle andre browsere.

IE-specifikke stylesheets

For det første lægger jeg nogle IE-spefikke stylesheets ind i nogle Microsoft betingede kommentarer:

<!--[if IE]>
  <style type="text/css" media="screen">
    #ydreboks {zoom:1;}
    #indreboks {zoom:1;}
  </style>
<![endif]-->
<!--[if lt IE 6]>
  <style type="text/css" media="screen">
    #ydreboks {height:1px;}
    #indreboks {height:1px;}
  </style>
<![endif]-->

Vil du vide noget mere om, hvad det er for noget, kan du læse min artikel Microsoft betingede kommentarer.

Det, der sker her er, at kun Internet Explorer læser den første kommentar, hvor et stylesheet påtrykker #ydreboks og #indreboks egenskaben zoom. Det er en Microsoft-specifik egenskab, der kan bruges til at øge størrelsen på et element. Da det kun er Internet Explorer 6 og flg. der forstår denne egenskab, har vi normalt ikke noget at bruge den til, men den er altså handy lige i dette tilfælde, fordi det er en af de egenskaber, der udløser hasLayout-egenskaben i Internet Explorer, og dermed løser vore problem i forhold til denne browser.

Internet Explorer 5 forstår ikke zoom-egenskaben, så derfor sætter jeg i forhold til denne browser – i endnu et stylesheet i en betinget kommentar – højden på de kritiske elementer til 1 pixel. Det er jo dødens pølse, hører jeg dig udbryde, men det er nok fordi du har glemt at netop IE 5 og IE 6 (men ikke IE 7) er totalt ligeglad med en påtrykt højde, men udvider en css-kasse så den kan rumme indholdet.

(Der er mange, der tror at sådan skal det være, fordi de kun har tjekket deres websidekonstruktioner i IE 5 eller IE 6. Men er altså forkert. I en standardoverholdende browser vil indhold i en css-kasse med fikserede mål flyde nedenud af kassen.)

Resultatet af disse øvelser kan du se i eksempel 2.

Nøgleksempel

For at understrege virkningen har jeg lavet eksempel 2a, hvor jeg har lagt en grafik ind under de to yderste spalter og en anden grafik under midterspalten. Det sidste er opnået ved at lægge grafikken under div#side-elementet og herefter sikre at sidefods- og sidehovedelementerne får en baggrundsfarve, der kan dække over baggrundsgrafikken.

Dette er et nøgleeksempel til løsningen af problemet med at få alle kolonner i et trespaltet layout til at se lige høje ud.

HTML-kildekoden til disse to eksempler er den samme som er gengivet for eksempel 1 i starten af denne artikel. De fuldstændige stylesheet-kode til eksemplerne er indlejret i head-delen af eksemplerne og kan kopieres ved brug af browserens Vis kilde funktion.

En bedre løsning...

Jeg bryder mig ikke om den løsning, jeg lige har beskrevet. Den er vanskelig at overskue, og lider af den skavank, at vi nødvendigvis i kildekoden må placere den venstre spaltes indhold før den egentlige artikel.

For mig at se er det væsentligt for søgemaskiner, talende browsere og så videre, at selve artiklens indhold, det der indeholder en websides egentlige budskab, præsenteres først i kildekoden.

Hvordan din webside tager sig ud i forhold til en søgemaskine kan du få et godt indtryk af på følgende url:
http://www.gritechnologies.com/tools/spider.go?q= http://www.webdesign101.dk/index.php.

Du kan erstatte url'en i sidste del af ovenstående med en vilkårlig webside for at teste denne.

Absolut positioneret venstre spalte

Det kan godt lade sig gøre at ordne dette i den type layout, jeg har gennemgået oven for. Men inden vi går videre til det, er det måske værd at overveje, om vi ikke med udgangspunkt i eksempel 2 kan placere en absolut positioneret div i den venstre margin. I denne div kan jeg derefter placere den menu og/eller det indhold jeg i øvrigt vil have i venstre spalte.

Dette eksempel se du som eksempel 3. Den grundlæggende html-kildekode til dette eksempel ser du herunder:

<div id="page">
<div id="indreboks">
  <div id="container">
    <div id="indhold">
    [ Artikel ]
    </div>
  </div>
  <div id="rightcol">
  [ Højre spalte ]  
  </div>
  <div class="clear"> </div>
</div>
<div id="footer">
[ Sidefod ]
</div>
<div id="leftcol">
[ Menu ]
</div>
<div id="banner">
[ Sidehoved ]
</div>
</div>

Som du kan se har jeg placeret såvel banner som venstre spalte indhold i slutningen af kildekoden. Det er der ingen problem med, når jeg, som du ser i stylesheet til siden, positionerer disse elementer absolut.

#page { /* Omslutter alt indhold på siden */
  background-image:url(leftcolbg200.png);
  background-repeat:repeat-y;
  background-position:left top; 
  width:95%;
  max-width:45em;
  margin:1em auto;
  position:relative;
  border-left:1px solid #257;
  border-right:1px solid #257; }
div#indreboks { /*  Se artiklen "Layout med lige 
                    høje kolonner" for en 
                    beskrivelse af layoutets 
                    hovedelementer */
  background-image:url(rightcolbg.png);
  background-repeat:repeat-y;
  background-position:right top;
  margin-left:202px; /* Plads til venstre kolonne */
  margin-top:60px; }
#container {
  width: 100%;
  float: left;
  margin-right: -200px;
  background-image:url(rightcolbg.png);
  background-repeat:repeat-y;
  background-position:right top;
  background-color:white;}
div#banner {
  position:absolute; 
  background-color:#257;
  height:60px;
  top:0;
  left:0;
  width:100%;}
  
#banner h2 { /* Obs forskellige "naturlige" 
                marginer, line-heights 
                i forskellige browsere */
  color:white;
  font-size:30px;
  line-height:100%;
  margin:10px 0 0 0;
  padding-left:16px;}
  
#footer h2 {
  background-color:#257;
  margin:0;
  padding: 10px 0 10px 16px;
  color:white;}
div#indhold {
  margin-right:202px;}
div#indhold h1, div#indhold p {
  padding-left:10px; }
#rightcol {
  width: 200px;
  float: right;}
#rightcol p {
  font-size:95%;
  margin: 0 1em 0.5em 1em; }
#leftcol {
  position:absolute;
  width:200px;
  top:65px;
  left:10px; }
#footer {clear: both; }

På mine almindelige sider har jeg både absolut positionerede og relativt positionerede elementer i toppen af siden. Jeg ønsker at en søgemaskine skal se mit websteds navn først af alt, hvorimod den navigationsbjælke, der udgør min hovedmenu, kommer til sidst. I dette eksempel viser jeg hvordan: Eksempel 4. Eksempel 4a er en variation med kontrolleret sidebredde. For så vidt angår disse eksempler må du tage “Vis kilde”-funktionen i brug for at se html-kode og stylesheet.

En interessant løsning uden grafik

Hvis du kun er interesseret i at få en baggrundsfarve på hhv. venstre og højre spalte, og altså ikke absolut skal have en spaltestreg, har Stu Nichols anvist en meget kreativ løsning, som i alt sin brillante enkelhed går ud på at forsyne den midterste spalte med nogle enormt brede borders og dernæst float'e venstre og højre spalte op på siden af dette center-element.

Grundideen er følgende html-kode:

<div id="banner">
[ Sidehoved ]
</div>
<div id="ydreboks">
  <div id="indreboks">
    <div id="leftcol">
    [ Menu ]
    </div>
    
    <div id="right">
    [ Indhold højre kolonne ]
    </div>
    
    <div id="center">
    [ Indhold centerkolonne ]
    </div>
    
    <div class="clear"></div>
  </div>
</div>
<div id="footer">
<address>
[ Sidefod ]
</address>
</div>

Grundlæggende er der jo ikke så forfærdelig meget forskel på dette og så det, jeg har vist i forbindelse med andre eksempler.

Stu's tilgang til stylesheet formateringen er imidlertid fundamentalt anderledes: 

#ydreboks {
  position:relative; 
  display:block; 
  background:#eee; 
  border-left:200px solid #edf; 
  border-right:200px solid #edf;}

#indreboks {
  display:block; 
  margin-left:-200px; 
  margin-right:-200px; 
  padding:5px}

#center {
  margin-left:200px; 
  margin-right:200px; 
  position:relative; 
  display:block; 
  height:1%;}

#leftcol {
  float:left; 
  position:relative; 
  width:200px; 
  left:0;}

#rightcol {
  float:right; 
  position:relative; 
  width:190px; 
  right:0;}

Det, der er interessant her, er naturligvis de meget brede venstre og højre rammekanter (border) på #ydreboks-elementet. Der er farven på disse, der danner baggrundsfarve på de på ydre spalter, og da #ydreboks-elementet altid vil have samme højde som den højeste af de tre spalter, vil denne baggrundsfarve strække sig fra top til bund uanset hvilken spalte, der på grund af sit indhold er den højeste.

I og med #indreboks har negative marginer, bliver der plads uden for #indreboks til de to float'ede elementer #leftcol og #rightcol.

Eksempel 5 viser den her beskrevne side.

Denne side er senest opdateret: 29. March, 2006