What I am trying to achieve in the webdesign of a single page is a “matrix” of several fields in a grid with three side-by-side fields of the same height. Each field has a background-color, and some text content. The line-height should adjust to the space needed by the content = the one field with the longest content defines the height of the “table-row” so to speak. Can you get that working with divs?
The only “solution” I found was defining a fixed height of the divs in px, which of course does not at all adjust to the content within the fields.
From my knowledge the only way to achieve something like that is the use of tables and width defined in percentage. If so, is there a CSS trick to float / clear the td in a way that beneath a certain breakpoint (@media) it collapses to a single-column table with the td stacked upon each other? Meaning something like
1 2 3
4 5 6
7 8 9
By the way, I am currently developing the website with the ZURB Foundation framework (*WHICH IS AWESOME*), but it seems it can’t really handle this with onboard div-classes. Wouldn’t mind to go off Foundation standards with this single page, yet I don’t know whether this would be possible in CSS.
Thanks @Mottie, this is great!!! Your demo AND the link provided – cheers for that. For the moment I will stick with the rather simple css-table technique, switching from
at a certain breakpoint for mobile devices – imitating Foundation’s intention. I am OK with that, since I will leave IE7 behind anyway. But if there’s more time I will definitely revisit your solution with the Equalizer plugin. Thanks again – the power of the web community!