Avatar billede mortenbock Nybegynder
14. december 2005 - 15:49 Der er 4 kommentarer og
1 løsning

kolonner med forskellig højde via <div> tags

Hej eksperter

Er der noget der har fundet et fix til dette?

Jeg har en side med følgende:

<div id="container">
<div id="leftbox"></div>
<div id="content"></div>
<div id="rightbox"></div>
</div>

Mit container div har én baggrundsfarve, og de andre har en anden.

Problemet er nu, at det varierer hvilken af de tre kolonner der er højest, men jeg vil gerne have container div'et til at tilpasse sig efter den højeste af dem.

Kan det lade sig gøre, eller er jeg tvunget til at benytte mig af tabeller?
Avatar billede mortenbock Nybegynder
14. december 2005 - 16:09 #1
Jeg har lavet et eksempel her:

http://www.mortenbock.dk/test/kolonnetest.htm
Avatar billede mortenbock Nybegynder
14. december 2005 - 16:51 #2
Jeg tror jeg har fundet en løsning:

http://www.quirksmode.org/css/clearing.html

Her er det godt nok kun to kolonner, men princippet fungerer:

div.container {
    border: 1px solid #000000;
    overflow: hidden;
    width: 100%;
}

div.left {
    width: 45%;
    float: left;
}

div.right {
    width: 45%;
    float: right;
}

hele fidusen ligger i "overflow: hidden;" elementet. Den sørger for at containeren strækker sig ud for at nå rundt om alle floats.

Læs dog på siden der er linket til omkring begrænsninger. Det giver jo stadig risiko for at indhold bliver skjult, hvis ikke containeren er tilstrækkelig fleksibel til at vise alt indholdet.
Avatar billede roenving Novice
15. december 2005 - 15:07 #3
-- i hvilke browsere ?-)
Avatar billede mortenbock Nybegynder
15. december 2005 - 15:22 #4
Det virker i hvert fald i IE og Firefox.
Avatar billede mortenbock Nybegynder
17. december 2005 - 12:44 #5
lukket
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester