CSS side by side div's auto equal widths

Answer 1

For the sake of older browser compatibility, here's a solution that works.

html:

css:

.parent{
    height: 200px;
    background: #f00;
}
.parent > div{
    width: calc(100%/3);
    height: 100%;
    float: left;
    background: #fff;
}

However, to make it dynamic, since you'd know if it'd be 2 or 3 columns, you can put the count in a variable and do internal / inline css:

//$count = 2 or 3

Internal CSS (recommended)

...


...

Inline CSS: