Tre kolumner i samma höjd med hjälp av css

Om man gör en layout med några kolumner bredvid varandra så vill man ibland att kolumnerna ska vara lika höga. Man kan givetvis använda tabeller men ett modernare sätt är m h a css.

Vi skapar tre kolumner av flytande div-taggar i en div-kontainer.

Lite text

Lite mer text

Mycket mycket mer text

Kolumnerna blir inte lika höga - inte snyggt!

Ett sätt är att i kontainern lägga en bakgrundsbild med visuell avgränsning för varje kolumn. Denna metod är dock inte så effektiv om man i framtiden vill ändra bredden på kolumnerna. Här är en smart lösning som fungerar i de flesta webbläsare:

CSS:

div#kontainer{
overflow:hidden;
zoom:1;
}
div#kontainer div{ float:left;
width:100px;
margin-right:10px;
padding:5px;
background-color:#123456;
border:1px solid pink;
margin-bottom:-200px;padding-bottom:200px;
}
div#kontainer p{
color:#FFFFFF;
}
div#kontainer div.farg{
background-color:#122222;
}

Första kolumnen

Andra kolumnen kommer här.

Tredje kolumnen som är längst kommer här. Vi vill att de andra kolumnerna ska vara lika långa som denna.

Stylen är testad och fungerar i IE6+, Firefox 2.0.0.6