html - Responsive grid with fixed column width -

i guess have simplest problem ever , cannot find ready solution.

i need make grid fixed widths , fixed distance between them.

i need x columns 400px (x = total width/400), , during browser resizing need grid shrink, column column (columns must keep width size , distance between them).

the content flows on columns , should spread out on columns.

that's why don't open source grid system (boostrap, skeleton, etc.) use %width, , columns change width on resizing.

what simplest way?

edit/clarification:

this how looks without columns: http://jsfiddle.net/xjrt8qrm/16/show/

<div>see fiddle</div> 

i want have x columns. x maximum possible amount of 400px columns, depending on users resolution. want 1 row of columns, content spreads on newspaper top bottom.

so somehow on pc: http://i.imgur.com/kmd620p.png (you can ignore text/comments there).

it's pretty simple. container holds contents together. float left cause them line left right. when container runs out of space hold them, they'll drop right row below 1 @ time. clear div clears out float doesn't propagate other nearby classes. obviously, you'll have handle padding, margins, etc style dictates.

if needed newspaper vertical layout, try solution like one

you use media queries in manner or overflow:none hide columns didn't fit if desired behavior.

here's simple solution:

html:

<div class="container">       <div class="fourhundred">           div 1       </div>       <div class="fourhundred">           div 2       </div>       <div class="fourhundred">           div 3       </div>       <div class="clear"></div>     </div> 

css:

.fourhundred {    width: 400px;   margin: 10px;   float: left; } .clear { clear:left } .container { width: 100% }