Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS responsive “table” matrix

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #41781
    tomk
    Member

    Hi CSS Tricks Forum,

    Anybody able to wrap his mind around this one?

    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

    becomes

    1
    2
    3
    4
    5

    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 for any help in advance, Tom

    #120018
    Mottie
    Member

    Would this work for you ([demo](http://jsfiddle.net/Mottie/wps2H/1/))?

    div {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    div:nth-child(3n+1) {
    clear: both;
    }

    @media all and (max-width: 500px) {
    div {
    float: none;
    }
    }

    if you need to equalize the height of each block, then check out this [adaptive demo](http://css-tricks.github.com/Equalizer/adaptive.html) I just made for the Equalizer plugin.

    #120034
    tomk
    Member

    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

    display: table;

    to

    display: block;

    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.