Webdesign 101 demoside

CSS layout

2-spaltet layout med menuen til sidst i kildekoden

Nøglen til ændring af elementernes placering i kildekoden: Float det rette element.

Formålet med dette eksempel er at vise, hvorledes du kan flytte venstre kolonne ned i slutningen af kildekoden, og samtidig fixe det sådan, at sidefoden står nederst, uanset hvilken af spalterne, der har det meste indhold.

Dette formål tilgodeses ved at float'e begge spalter, den ene til venstre, den anden til højre. Så er det ligegyldigt, hvilken én der kommer først.

Lad os først kigge på nogle eksempler, der viser et af principperne i den løsning vi søger. Disse eksempler er beskrevet på websiden Float wrapping.

Denne eksempelside er lavet ud fra eksempel 3 i den artikel:

HTML-kildekode

<div id="side">
<div id="sidehoved">
[ Sidehoved indhold ]
</div>
<div id="indhold">
[ Artikeltekst ]
</div>
<div id="menucol">
[ Menuspalte indhold ]
</div>
<div class="clb"></div>
<div id="sidefod" class="clb">
[ Sidefodens indhold ]
</div>
</div>

De operative formdeklarationer for dette eksempel er:

div#side{
  width:45em; 
  margin:1em auto;}
div#indhold {
  width:30em;
  float:right;
  border-left:1px solid #257;
  padding-left:1em;}
div#menucol {
  width:13em;
  float:left;
  padding-top:1.5em;}

.clb {clear:both;} /* obs */

Den samlede bredde, der er til rådighed, er 45em. Disse fordeles på de to elementer med 13em til menuspalten og 31em (30em width og 1em padding) til #indhold-spalten. Det efterlader 1em mellem den venstre-float'ede menuspalte og den højre-float'ede indholdsspalte.

Dermed har vi nået det ene af vore mål, nemlig at sikre at sidefoden skubbes nedad, uanset hvilken spalte, der har det meste indhold. Dette sikres ved at indsætte en i øvrigt tom div med klassenavnet clb, modsvarende formdeklarationen .clb {clear:both;}.

Du kan ikke nøjes med at float'e sidefoden. Sidefoden har ikke nogen eksplicit højde, og hvis den floates, tages den ud af elementernes normale omløb og er dermed – i denne konstruktion – ude af stand til at skubbe browervinduets underkant nedad.

Procentvise bredder

I disse eksempler bruger jeg em-bredder. Der er imidlertid ikke noget i vejen for at bruge procentvise bredder. Det ser du illustreret i eksempel 5a.

Vis/skjul tekst i venstre spalte

Men som du ser, hvis du bruger linket herover, rækker spaltestregen ikke længere end betinget af indholdet i artikelspalten. Måden at få denne streg til at nå fra top til bund er at knytte den til et element, der omslutter de de to float'ede elementer, en “float wrapper”. Emnet for dette er eksempel 7. Eksempel 6 er det selvsamme layout som dette, men med en højrestillet menuspalte.

8. august 2007