html - Fixed gap between CSS columns

Question

I'm trying to create flowing content using CSS columns, but I'm running into the problem where gaps between columns readjust when I resize the browser window horizontally. Is there any way to make the column gaps fixed? It seems like the column-gap CSS property only allows you to set a minimum column gap, and as the viewport is expanded, the gaps increase proportionally.

Here's the CSS I have right now:

column-gap: 5px;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
column-width: 240px;
-moz-column-width: 240px;
-webkit-column-width: 240px;

and then I have divs inside that are fixed width and have display: inline-block.

EDIT: Here's a sample jsFiddle with the appropriate HTML/CSS: http://jsfiddle.net/4cqbr/1/. I'm trying to create a sideways-scrolling collection of posts that are fixed width, variable height. When you resize the 'Result' area, you can see that the column gap expands and contracts.

Answer 1

The column gap is only changing sizes because you set a hard width on the columns. You can't have a fluid layout with all hard set widths, something has to be fluid.

Here is an example with fluid columns and consistent gaps.

p{
  column-width: 240px;
  column-gap: 2em;            
  padding: 5px; 
  text-align:justify;
}