This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Equal height boxes with flexible widths

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

One way to build a layout like this is to measure all possible box-sizes to the pixel, create all background-images for these boxes (a few hundred in this extreme case) and start writing a CSS file of a few thousand lines. I chose to see if there’s another way to do this, with less code and much less images (one). And here I present this other way.

Equal height cols with a flexible width

Basically what this technique comes down to is to place an absolutely positioned div inside a statically positioned floating div which is inside a relatively positioned div with overflow set to auto. The absolutely positioned div can inherit the left position and the width of its direct parent, but if you define its top and its bottom it will, off course, inherit these from the containing, relatively positioned div. And this relatively positioned div will get its height from the highest statically positioned floating div. Why didn’t you think of this before? (-:

Check out these examples

  1. Equal height cols with a flexible width
  2. Equal height cols with a flexible width, a border and padding between the boxes
  3. Equal height cols with a flexible width, padding between the boxes, rounded corners, dropshadows and flexible background-colors

IE6 needs JavaScript. I didn’t bother to include it here. Opera needs an update in order to display this correctly, I filed a bugreport. IE7 has difficulties with percentages.


    • Zoute snor
    • #

    En een php/css hybride zou hier niet werken? (niet dat ik niet te lui ben om een voorbeeld te maken hoor)

    • Vasilis
    • #

    Uhm… Hoe bedoel je?

  1. Nice en slimmig! :-)

    Het werkt (met wat aanpassingen) dus in de meeste moderne browsers.

    Het zou mooi zijn als je de content in de lege ‘statische’ div zou kunnen plaatsen. Maar misschien is dit puur aestetisch.

    Kleinigheidje: volgens mij hoef je floats niet alsnog display: block mee te geven. Een float is automagisch ‘block’.

    • Vasilis
    • #

    Kijk! David heeft de code gelezen! Ik zal de blocks verwijderen. Die zaten er in omdat ik eerst html5 elementen had gebruikt, die hebben wel display:block nodig.

    • Vasilis
    • #

    Maar de content staat toch in de statische div? De absolute div is leeg. Dat vind ik zelf een mooiere oplossing. Zo houd je content-markup van grafische markup gescheiden.

  2. Ja, ik bedoelde de ‘absolute’ div natuurlijk, maar je hebt een punt: die is eigenlijk alleen voor de grafische kant…

  3. Lekker CSS-loos, zo hier vanaf m’n werk. Wel kleine lettertjes zonder opmaak, maar verder redelijk leesbaar (-:

  4. Enneh, kun je mij als geïnteresseerd leek uitleggen wat er eigelijk zo evil is aan tabelletjes?

    • Vasilis
    • #

    Er is niks evil aan tabelletjes. Ze zijn hardstikke handig als je tabulaire data wilt tonen. Maar ze zijn niet bedoeld om een layout mee te maken. Daar heb je andere elementen voor.

  5. Een andere, ongetwijfeld duivelse, oplossing is om de articles een padding-bottom: 2000px; margin-bottom: -2000px; te geven en de section een overflow: hidden; Of heb je dan niet hetzelfde resultaat? Deze oplossing is in ieder geval netter, dat is zeker.

    • Vasilis
    • #

    Hoezo duivels? Dat is gewoon een prachtige, lekker simpele oplossing die dit artikel voor een deel overbodig maakt (-: