even spacing between floated divs - css

Question

Im wanting to float 3 divs evenly(or more generally speaking) .
Im building a responsive theme (kinda) and i want specific items to adjust accordingly based on widths available.
now Yes i can start with taking random screen measurements and make calculations for "breaking points" (what i normally do) but with so many devices, im trying to see if i can make something truly flex in a smarter way which for me, would be something more automatic.
Like when one does even alignment with say margin 0px auto; etc...
so for example. if i have parent div at 1000px wide, and div1, div2, div3, div4 that i want floated at say, 240px wide, and "even" spacing, id maybe do it like this.
div1{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div2{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div3{ float:left; max-width:XXX; min-width:XXX; margin-right:10px; }
div4{ float:right; max-width:XXX; min-width:XXX; }
which will give me more or less my even spacing. If i wanted to adjust to different screens, id maybe do a media queries and blah blah blah
then id have to start with math to make good breaking points that look even.
is there a way to make it so that the spacing between divs floated remains even reguardless of the screen width without having to get into specific numbers?? as an example again, like when one does margin 0px auto; for example???
It may have been asked before, i apologize if it has.
Thanks in advanced.

Answer 1

If your markup looks similar to this...
<div class="parent">
<div>a</div>
<div>b</div>
<div>c</div>
<div>c</div>
</div>
Flexbox can do this very easily, and you won't need to use media queries for narrower devices. It just redistributes the free space for you.
http://jsfiddle.net/END8C/ (all prefixes included)
.parent {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin: -5px; /* optional */
overflow: hidden; /* optional */
}
.parent div {
-webkit-flex: 0 0 240px;
-ms-flex: 0 0 240px;
flex: 0 0 240px;
margin: 5px;
}
You're still free to use floats on the child elements as a fall back for browsers that don't support flexbox (see: http://caniuse.com/#search=flexbox). Only thing to be aware of is that Firefox doesn't support wrapping so you'll have to use a #supports block for the unprefixed version (see: http://www.sitepoint.com/supports-native-css-feature-detection/).
You can get a similar effect by using justification:
http://jsfiddle.net/END8C/1/
.parent {
text-align: justify;
margin: -5px; /* optional */
}
.parent:after {
content: " ";
display: inline-block;
width: 100%;
}
.parent div {
display: inline-block;
margin: 5px;
width: 240px;
}
You'll need to comment out or remove any whitespace after the last child element or they won't line up right when the children wrap.

Answer 2

Try this, it will work for dynamic width,
#parent
{
width:99%;
text-align:center;
border-style:solid;
}
.kids
{
width:23%;
border-style:solid;
height:100px;
display:inline-block;
}