CSS - Multiple Columns with min-width & max-width - html

Question

I'm having a bit of a "moment" where I am stumped on an issue I thought should be pretty easy (and probably is, I'm just over complicating I'm sure).
I'm looking to have a div with multiple children div's; the children should automatically expand or contract based on the number there are (the site I'm working on is in a CMS that allows a user to add or remove items).
My issue is having the div's respect the min- and max-width declaration. I have a hunch that it could be something to do with them being float:left, but I've tried a few other variations with no luck.
My main objective is to get these columns to fill their space on one "row", up to 4 columns.
EDIT: I need to have these columns be a minimum width, as well as a maximum width. So if there are 3 child div's, they should all be wider than if there were 4 child div's.
Here is an example of my code: http://codepen.io/joe/full/IJvGp
HTML
<div class="sub cf">
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
<div class="col">
Column 3
</div>
<div class="col">
Column 4
</div>
</div>
</div>
CSS
.sub {
width: 670px;
background: #fff;
border: 10px solid #414042;
}
.sub .row {
padding: 0;
float: left;
width: 100%;
}
.sub .row .col {
min-width: 166px;
max-width: 222px;
width: 100%;
float: left;
border-right: 1px solid #D0D2D3;
margin: 0;
padding: 0;
}
.cf::before, .cf::after {
content: "";
display: table;
}
.cf::after {
clear: both;
}

Answer 1

With jquery you could dynamically set the column widths as a % based on the number of columns within the row.
var colWidth = (1 / $('.sub.cf .row').children().length * 100) + '%';
$('.sub.cf .col').outerWidth(colWidth);​
working fiddle. Insert or remove more columns and rerun it to see how it works.

Answer 2

Removing the width:100%; on the .sub .row .col item made them appear in 4 columns.
Regardless it looks like you should be using a table instead of this approach.

Answer 3

CSS3 Solution
Remove the min and max widths on .col but add the box-sizing: border-box property to that. Then add the following code below the .col definition which yields the result in this fiddle:
.sub .row .col:nth-last-of-type(2),
.sub .row .col:nth-last-of-type(2) ~ .col
{
width: 50%;
}
.sub .row .col:nth-last-of-type(3),
.sub .row .col:nth-last-of-type(3) ~ .col
{
width: 33.3%;
}
.sub .row .col:nth-last-of-type(4),
.sub .row .col:nth-last-of-type(4) ~ .col
{
width: 25%;
}

Answer 4

You could try something like this:
HTML:
<div class="sub">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS:
.sub {
text-align: justify;
width: 670px;
background: #fff;
sborder: 10px solid #414042;
}
.sub div {
display: inline-block;
max-width: 166px;
min-height: 100px;
border-right: 1px solid #D0D2D3;
margin: 0;
padding: 0;
}
.sub:after {
content: '';
width: 100%;
display: inline-block;
}

Answer 5

The main problem here is width: 100% and max-width: 222px. With width: 100% you are making the children divs as big as you can. And because of max-width: 222px they all become 222px width. Your parent div is 670px width, so if you do the math: 222px * 4 = 888px. The children divs' total width is exceeding the parent's width, that's why it's pulling the last div down.
You can try:
Codepen
If you don't care much about supporting IE8- then ScottS solution is the best.

Answer 6

You have the following code.
max-width:222px;
Reduce it to some value so that it can be accomdated!
max-width:166px;
works for me!