Auto Space Between Horizontal Divs In Css

I've searched a lot but I was not lucky to find a solution to what I am after! Here is the issue: I've created a master div (width 100%) and within it there are several inner divs.

Solution 1:

Here is JSFiddle

Assume that you have 100% and you have 4 pieces. 4 pieces means you have 3 margin-left block so, when you make your div 22*4=88 then 100-88=12 then 12/3=4 then your margin-left must be:4

div.box_frame{
    float: left;
    background-color: #eee; /* standard background color */border: 1px solid #898989; 
    border-radius: 11px;
    padding: 2px;
    margin-left:4%;
    text-align: center;
    /* change border to be inside the box */box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
div.box_frame:first-child{
    margin-left: 0;
}
div.box_frame#_15{ /* width 15% */width: 22%;
}

So if you use less variables then you can use this solution without depending on number of div blocks

Solution 2:

First and foremost, you cannot use the same ID more than once per HTML page.

Secondly, you are on the right track. Just use a margin-right on every element, then proceed to add a psuedo-class of last-child and set margin to 0.

http://jsfiddle.net/EAkLb/1/

To make it work that way for any amount of divs, it would be best practice to still establish a percentage that makes sense. (ie 25% for 4, 33% for 3, 16.6% for 6, etc)

---

EDIT:

This here would be a much better way to do it (try resizing the window):

http://jsfiddle.net/EAkLb/5/

Solution 3:

You can achieve this effect by putting display:inline-block on all child elements, and then apply text-align-last:justify to the parent container to enable evenly spaced inline child elements.

See working Fiddle here.

There are a few caveats however - while Firefox has supported this since v12, and IE even since 5.5, there is officially no support in Webkit. It is however working fine in Chrome 32-beta with certain flags enabled, while it's not working in Chrome 31-stable or current iOS Safari builds for example.

Secondly, IE seems to only respect text-align-last when there is also a text-align declaration of the same type (which doesn't conform to standards).

I am not aware of any way to achieve this effect cleanly in another way in older Webkit browsers, but you could solve this by a margin-based fallback for example, or have a JS-based calculation at runtime.

Solution 4:

You cloud use a simple grid to archive this effect:

.section_zone {
  display: grid;
  grid-auto-flow: column;
}