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.

You can now accomplish this using CSS grid, see answer here. — Garrett
– Garrett, Commented Jan 7, 2021 at 0:32

bookcasey · Accepted Answer · 2012-02-02 01:19:40Z

4

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;
}

answered Feb 2, 2012 at 1:19

bookcasey

40.9k13 gold badges83 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThisWillDoIt Over a year ago

I don't get why it shouldn't be possbile. With the height, gap and column width fixed, there is still the total width of all columns needed flexible. Maybe one ahs to scroll, but that's what I would expect from what Adi tried to do.

Garrett Over a year ago

Right, instead of adding more column gap space, it should just left-align the columns instead of "justfying" them.

Collectives™ on Stack Overflow

Fixed gap between CSS columns

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related