1. Webdesign 101 forside
  2.  » Avanceret float-layout

Float-layout med lige høje spalter

Dette eksempel er næsten identisk med eksempel 1 til artiklen Avanceret float-layout.

Det adskiller sig ved nogle ganske få formregler, der betyder at baggrundsfarven på #nav-spalten i højre side strækker sig hele vejen fra spaltens øverste kant til sidefoden, uanset hvilken af de to spalter, der har mest indhold.

Lige høje spalter

I artiklen Webside layout med float-egenskaben fra 2006 beskrev jeg i slutningen af ariklen hvorledes du ved hjælp af en baggrundsgrafik kunne skabe indtryk af, at to spalter var lige høje.

Den metode har altid forekommet mig en smule omstændelig, så derfor bruger jeg nu en anden metode til, som på denne side, at skabe dette indtryk.

Ekstremt højde spalter

De to spalter, der har indhold, forsynes med en ekstrem padding i bunden og med en tilsvarende ekstrem negativ margin i bunden:

  div#nav, div#artikel {
    padding-bottom:1000em;
    margin-bottom:-1000em;}
  

Princippet er, at en baggrundsfarve – her kun under menuspalten til højre – kan ses under elementets padding, mens en margin, altså også en negativ margin, er usynlig.

Hvis vi nøjes med disse formregler vil elementernes voldsomt store padding-bottom imidlertid skubbe underkanten af det #container-element, der omslutter de to indholdselementer, nedad. Det bekæmper vi ved at definere at overskydende indhold i #container-elementet skal skjules:

  div#container { overflow:hidden;}
  

I det foregående og dette eksempel har jeg præsenteret dig for at par værktøjer til at lave forskellige layouts, nemlig

  1. Idéen om, at du med negative margin kan blande procentvise og fikserede bredder, og
  2. Idéen om, at du ved at sætte en ekstrem padding-bottom på dine indholdselementer kan få en baggrundsfarve eller en baggrundsgrafik til at skabe indtryk af, at to eller flere spalter er lige høje.

Således bevæbnede kan vi nu kaste os ud i et par layout-eksperimenter

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.

Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet, iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a, tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam scelerisque consectetuer magna. Nam interdum risus non tortor. Donec eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod. Praesent nec purus. Mauris eget magna.

Nullam vehicula, augue id imperdiet iaculis, tellus neque commodo felis, ac aliquet risus nibh id nibh. Curabitur id odio non diam pretium luctus. Curabitur volutpat libero vel dolor. Ut imperdiet quam vel massa. Maecenas aliquam, diam nec dignissim accumsan, mauris mi venenatis turpis, consequat vestibulum enim lorem quis nibh. Integer bibendum pretium purus. Quisque ante. Nulla sed arcu. Etiam vel arcu. Nunc varius. Maecenas elementum lacus sit amet arcu. Curabitur sagittis gravida ipsum. Donec ac turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean aliquam commodo diam. Duis viverra fermentum purus. Maecenas congue, sem non luctus ultrices, diam wisi porta diam, in varius dolor nulla id ante. Aliquam convallis volutpat nibh.

Oprettet april 2009