Search code examples
htmlvertical-alignmentcssliquid-layout

CSS change height of children based on container element count

I've got a container which sometimes has three elements, sometimes four. The height of the container is constant.

enter image description here enter image description here

Are there any bright ideas out there for a CSS-based method for a vertical liquid layout like this?

That is, so the children are either 25% or 33% height, but they figure that out by themselves? (smart kids.) EDIT of course it doesn't necessarily have to be percentage based...

I can do something PHP-based pretty easily, but a more elegant solution would be nice.

Solution

  • Well, I've just ended up using a table as the outer container. Table rows added dynamically vertically scale the layout automatically.

    Elegant enough, and prevents any PHP processing. Any other solutions welcome, of course (and maybe accepted).