CSS column spacing fixed

Question

I am trying to create a content stream using CSS columns, but I ran into a problem when the spaces between the columns are corrected, when I resize the browser window horizontally. Is there a way to eliminate gaps in the columns? The CSS column-gap property seems to allow you to set the column break to a minimum , and as the viewport expands, the gaps increase proportionally.

Here is the CSS that 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 a fixed width and display: inline-block .

EDIT: Here's a jsFiddle example with the appropriate HTML / CSS: http://jsfiddle.net/4cqbr/1/ . I am trying to create a scrollable collection of messages with a fixed width, variable height. When you resize the Result area, you can see that the column break widens and contracts.

Answer 1

The difference in the columns only changes in size, since you set the rigid width of the columns. You can’t have a liquid layout with all the rigid settings, something must be fluid.

Here is an example with current columns and consistent spaces.

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