CSS - to stretch blocks evenly

Question

I need to come like this:

enter image description here

The ammount of blocks can be different.

jsbin

So you don't know how many blocks there will be? Is JavaScript an option? — matthewpavkov, Aug 15 '13 at 13:14
possible dub of http://stackoverflow.com/questions/1859243/css-fixed-with-horizontal-menu-with-variable-width-tabs-using-ul — koningdavid, Aug 15 '13 at 13:17
I think you want this: http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs — Joe_G, Aug 15 '13 at 13:31

score 1 · Answer 1 · answered Aug 15 '13 at 13:20

Since this question is tagged with css3 I am going to suggest a css3 solution.

Demo: http://jsfiddle.net/mqchen/VEmCK/

.wrap {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */ 
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21+ */
    display: flex;          /* NEW: Opera 12.1, Firefox 22+ */

    border: 1px solid black;
    padding: 1px;
    float: left;

    width: 100%;

    clear: both;
    margin-bottom: 20px;
}

.box {
    -ms-box-flex: 1;
    -ms-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    box-flex: 1;
    flex: 1;

    border: 1px solid red;
    padding: 5px 40px;
    margin-right: 30px;
}
    .wrap .box:last-child {
        margin-right: 0;
    }

(You need to tweak the sizes for your own use, but I think this gives a rough idea on how it might work for you.)

This solution uses flexbox for aligning the boxes. You can read more about it here: http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/

@Georgeek You could try a polyfill, e.g. https://github.com/doctyper/flexie (a polyfill is a small javascript that tries to enable/simulate newer browser features in browsers that don't support them) — mqchen, Aug 15 '13 at 13:40

score 1 · Answer 2 · answered Aug 15 '13 at 13:24

Why flexbox or JS solutions? You can accomplish this using display: table and display: table-cell;

http://jsfiddle.net/ygStV/

<div class="row">
 <div>1</div>
 <div>2Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
 <div>3</div>
</div>

.row { display: table; width: 100%; }
.row div { display: table-cell; width: 1%; }

score 0 · Answer 3 · answered Aug 15 '13 at 13:20

You need to write a script that does a count for how many divs you have and then divide by 100 and assign that as a width. If you really wanted to do it right you could also use foundation css framework to do the calculations for you (at least the widths).

score 0 · Answer 4 · edited May 23 '17 at 10:25

I've seen this a few times, and this is the best way to solve this in my opinion: Fluid width with equally spaced DIVs

Basically you use a span with a stretcher class at the bottom of your list and you add a 'text-align:justify' on your ul/container element for your nav.

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>

Here's a demo: http://jsfiddle.net/thirtydot/EDp8R/

CSS - to stretch blocks evenly

4 Answers4