Float-layout med 3 spalter
eksempel 4a

I dette eksempel er denne linie ca 60 tegn lang Lorem ipsum.

Forskellen på eksempel 4 og dette eksempel er kun fordeklarationen for #page-elementet:

#page { /* Omslutter alt indhold på siden */
    background-image:url(res/leftcolbg200.png);
    background-repeat:repeat-y;
    background-position:left top;
    max-width:55em;
    width:95%; 
    margin:0 auto;
    position:relative;
    border-right:1px solid #9d6041;
    border-left:1px solid #9d6041;}
 

Stylesheet

Hele stylesheet'et til denne side kan du se ved at bruge browserens Vis kilde-funktion. Det er forsynet med rigelige kommentarer, der nok skulle klare eventuelle tvivlspørgsmål.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.

Praesent imperdiet volutpat enim. Donec eget lectus. Morbi ornare dui vel eros. Morbi sit amet magna. Proin a tortor et mi iaculis cursus. Vivamus iaculis felis in justo. Donec dolor dolor, mollis et, sodales eget, vestibulum id, sapien. Proin fringilla risus ut lorem. Phasellus quis leo et sem tincidunt ultricies. Etiam dui lorem, gravida ac, volutpat at, mollis eu, wisi. Nam iaculis cursus arcu. Donec cursus, sem quis pulvinar bibendum, est leo sodales felis, sed laoreet lectus nibh at lacus. Sed erat. Aenean volutpat lacus sit amet pede. Duis nibh dui, tempor in, dictum non, ornare ac, ante. Nulla semper eros in justo. Nulla vel mauris.

April 2007.

 

OBS! OBS! OBS!

I dette eksempel er venstre spalte absolut positioneret. Det har den konsekvens, at denne spalte ikke har indflydelse på sidens højde. Derimod vil sidefoden blive presset nedad af indholdet i midterspalten eller i højre spalte, alt efter hvilken af disse, der har det meste indhold.