Question

so I need multiple lined divs to span across my page and then do the same thing when another div is added. But I’m not sure how I can achieve this. an example of this is:

[ div 1][ div 2][ div 3][ div 4][ div 5]

And then when another div is added it won’t stack below, but decrease the size of the divs to fit into the space.

Answer 1

You should use display: table-cell.

See: http://jsfiddle.net/2X73J/

The browser support is excellent: http://caniuse.com/css-table

<div class="multiContainer">
    <div>div 1</div>
    ..
</div>

.multiContainer {
    width: 100%;
    display: table;
    background: #ccc
}
.multiContainer > div {
    display: table-cell;
    border: 1px dashed #f0f
}