make max-width columns fluid?

Question

i've got a fluid/responsive column layout such as:

.row{
    float:left;
    max-width:960px;
    width:100%;
}

.column{
    float:left;
    margin:0 15px;
}

.column:first-child{
    margin-left:0;
}

.column:last-child{
    margin-right:0;
}

.column.third{
    max-width:300px;
}

html:

<div clas="row">
    <div class="column third">content</div>
    <div class="column third">content</div>
    <div class="column third">content</div>
</div>

it works, but when I resize the window, the columns don't resize, they just stay at their max-width until the window is below their max-width.

Is their a way to get them to resize with the window without using percentages? I want to get away from using percentage widths and margins, as they are (a lot of the time) not a whole pixel actual size and can lead to slight gaps and other things

JS fiddle for where its at so far: fiddle

Answer 1

You MUST defined a width on an element before max-width can be calculated, as such simply change your CSS for .column.third per the below:

.column.third{
    width:100%;
    max-width:300px;
}

Demo Fiddle

More from MDN

The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.

Answer 2

use resolution in % not in pixel.

For example use margin-left 10% instead 150px. it may work.