I am currently using a fluid/responsive column layout that looks like this:
.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;
}
Here is the HTML code:
<div clas="row">
<div class="column third">content</div>
<div class="column third">content</div>
<div class="column third">content</div>
</div>
Everything seems to be working fine, except that when I resize the window, the columns do not resize along with it. Instead, they remain at their max-width until the window is below that size.
Is there a way to make the columns resize in sync with the window without relying on percentage values? I would like to avoid using percentages for widths and margins as they can often lead to small gaps and inconsistencies in sizes.
Here is a link to the JS Fiddle of my current progress: fiddle