Using 'table' and 'table-cell' with display property in responsive design?

adaptive-design, css, html, responsive-design

Solution

To scale the inner containers down with the page, you can set the container `div`'s width to `100%`:

in your example:

#the-big-stories {
    display: table;
    table-layout: fixed;

    /** add 100% width **/
    width:100%;
}

further, if you want to scale the images with the child containers, just give them `width: 100%;` as well with `height:auto;`

see your codepen forked below:

http://codepen.io/braican/pen/xCmsw

You'll probably need to use media queries to really get the stuff inside to play nicely together, but the container will scale with the browser, as will the inner `div`'s.

Problem

I am using `display: table;` on the container and `display: table-cell;` on the child elements, to highlight some posts horizontally on a page. The thing is, I have no idea as to how to make them responsive, i.e. as the screen-size becomes smaller, each child (i.e. `table-cell`) should become proportionately smaller, whilst continuing to stay aligned horizontally. How do I do this? - Example Code: http://www.codepen.io/anon/pen/dCLgq - Demo: http://codepen.io/anon/full/dCLgq

Original source