Extende baggrund af element når float bruges

Tags:    html css

Jeg har lavet et klassisk html-template, hvor jeg først har en header, derefter et content-område indeholdene to containers der er floatet left/right og til sidst en footer.

Jeg er klar over at float fjerner det berørte html-elementet fra flow'et og derfor har jeg måttet bruge clear:both i footeren, men jeg har en baggrundsfarve knyttet til content og den extender ikke ned til footeren, men kun til den min-height jeg har defineret i css'en.

Hvad er det smarteste trick for at få content til at fortsætte hele vejen til footeren i dette tilfælde?

Se følgende link for et eksempel:

http://amok-adhoc.com/247/templates/template-columns_2.html



4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 3 karma
Sorter efter stemmer Sorter efter dato
enten bruge clearfix (søg på google) eller indsæt et br næst-efter alle dine elementer med float, men stadig indenfor den box der har baggrundsproblemer og tildel den følgende css:
Fold kodeboks ind/udKode 




Indlæg senest redigeret d. 02.01.2011 16:07 af Bruger #10216
Sæt en <div style="clear:both;"></div> i bunden af din #content div, lige under .right.



Du kan sætte overflow: hidden på din content div:
Fold kodeboks ind/udKode 




Fedt, tak for hjælpen.

Jeg skulle bare vide at problemet er kendt under navnet clearfix, for der er jo tonsvis af materiale om det på nettet.

Den med at indsætte et ekstra div-element er tilsyneladende lidt mere old-school end den metode fra følgende link, som jeg valgte at bruge:

http://www.positioniseverything.net/easyclearing.html



t