Fluid Width With Equally Spaced Divs

Fluid width with equally spaced DIVs

See: http://jsfiddle.net/thirtydot/EDp8R/

This works in IE6+ and all modern browsers!
I've halved your requested dimensions just to make it easier to work with.
text-align: justify combined with .stretch is what's handling the positioning.
display:inline-block; *display:inline; zoom:1 fixes inline-block for IE6/7, see here.
font-size: 0; line-height: 0 fixes a minor issue in IE6.

#container {  border: 2px dashed #444;  height: 125px;  text-align: justify;  -ms-text-justify: distribute-all-lines;  text-justify: distribute-all-lines;  /* just for demo */  min-width: 612px;}
.box1,.box2,.box3,.box4 {  width: 150px;  height: 125px;  vertical-align: top;  display: inline-block;  *display: inline;  zoom: 1}
.stretch {  width: 100%;  display: inline-block;  font-size: 0;  line-height: 0}
.box1,.box3 {  background: #ccc}
.box2,.box4 {  background: #0ff}

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

Fluid width with equally spaced DIVs + last row left aligned

Ok, here's the damn easy solution with css:

Simply add so many divs of how many in a row would be (in this case 4) and give them a height of 1px.

Nothing to see and all works like charm without javascript.

Here's the new fiddle: http://jsfiddle.net/L2mPf/1/

Thanks to @GGG for focusing me back on css and this solution.

Equally-spaced DIVs with variable width in one line

Use the flex-grow property on your li. This will not add padding, but force the flex items to increase in width to fill the space. You can then adjust the content as needed. See w3 schools.

For example:

ul,li {  padding: 0;  margin: 0;  list-style-type: none;}#navigation ul {  display: flex;  justify-content: space-between;  flex-direction: row;}#navigation li {  background-color: yellow;  flex-grow: 1;  text-align: center;}#navigation li:hover {  background-color: red;}

<div id="navigation">  <ul>    <li>E01</li>    <li>Element02</li>    <li>Ele03</li>  </ul></div>

Equally spaced DIVs also from the parent's border

And right after asking the question, I've figured out the answer (how ironic?). I'll share it in case someone needs it.

What I've done was creating spacer DIVs with 0 width before first and last content DIV. Here is how it looks like:

HTML:

    <div class="container">
        <div class="spacer"></div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="spacer"></div>
    </div>

and css:

    div.container {
        width: 100%;
        text-align: justify;
    }


    div.content {
        display: inline-block;
        width: 20%;
        margin: 0 auto;
    }

    div.container:after {
        content: "";
        width: 100%;
        display: inline-block;
    }

    div.spacer {
        display: inline-block;
        width: 0;
    }

Two lines of three evenly spaced divs/containers

Here is some basic CSS from an example that I put up for you on jsfiddle http://jsfiddle.net/Pm56t/

A basic way to achieve this layout would be to declare the widths of the 3 elements as 33.333%, then add float:left. Pad to taste..

* {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.container {
    width:100%;
}
.box {
    float:left;
    width:33.333%;
    padding:20px;
}

Jade not rendering fluid width equally spaced divs correctly

Wow. It turns out that the whitespace the pure HTML version has is the difference. Your Jade gets rendered like so:

<div class="grid"><div class="column">Item 1</div><div class="column">Item 2</div><div class="column">Item 3</div><div class="column">Item 4</div><div class="column">Item 5</div></div>

but when you write it out manually, you get:

<div class="grid">
  <div class="column">Item 1</div>
  <div class="column">Item 2</div>
  <div class="column">Item 3</div>
  <div class="column">Item 4</div>
  <div class="column">Item 5</div>
</div>

You could try setting pretty mode to true with something like app.locals({pretty:true}) in your configuration, but then you lose the benefit of not having pretty set to true in production.

As to another method of achieving the same end, I don't have an answer for that at this time.