Demo af footer

Dette er en demonstration af en teknik til at anbringe en footer nederst i et multi kolonne layout uden brug af java-script. Den oprindelige ide til dette eks. kom fra en kommentar på A List Apart (jeg kan ikke huske hvem som skrev det, men du kan måske finde den hvis du leder lidt).

body {
font-family: verdana, arial, helvetica, sans-serif;
}

h1 {
font-size:200%;
}

#col1 {
float:left;
display:inline;
width:30%;
font-size:76%;
}

#col2 {
float:left;
display:inline;
width:30%;
font-size:100%;
}

#col3 {
float:left;
display:inline;
width:30%;
font-size:76%;
}

#foot {
clear: both;
font-family: serif;
font-size:76%;
padding:10%;
text-align:center;
}

I midten kan du se mit style sheet. For html koden så brug bare sourcen til denne side.

For en ordens skyld er her lige en version hvor den midderste kolonne er den korteste.

Valid XHTML 1.0!

Valid CSS!