CSS Column-Count Not Respected

CSS column-count not respected

In your example (jsfiddle), there are 5 elements of equal size to be distributed into 4 columns. Since they won't fit next to each other (they are more than 4) , the first column will contain 2 elements. That defines the height of the container, so the second column will also get 2 elements, and so there's one remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...

In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.

column-count and column-width not respected

I answered a similar question here a few days ago: https://stackoverflow.com/a/46412808/5641669

However, I want to add something:

If the height of the container isn't fixed, the distribution of the items/text into columns always depends on the height of the first column. In your case, if the last item in your first column would be moved to the second column, the other columns would be less high (since they adjust their height according to the first column), so the items altogether wouldn't fit into 7 columns -> not possible.

So that fourth item is put into the first row to make it possible that all items fit into the number of columns defined by column-count. In this case, this results in only six colums having items in them, but 7 columns being there.

As I wrote before, the height of the whole container will always depend on the first column (i.e. if the height isn't fixed). The rest of the columns will just be filled according to that height (they won't get any higher than the first one), not according to an even distribution if items to the rest of the columns. Therefore, sometime the result can be a situation like yours, where the last column remains empty.

css columns: last column is not filled

In your example, there are 9 elements of equal size to be distributed into 4 columns. Since they won't fit into 4 columns when the first column contains 2 elements (which would add up to a maximum of 8), the first column will contain 3 elements. That defines the height of the container, so the second column will also get 3 elements, and so there's also 3 remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...

In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.

ADDITION AFTER COMMENT:

To get a distribution of elements as you want it, you have to insert empty DIVs - there is no other way (reason: read above):

.columns {  -webkit-column-count: 4;  /* Chrome, Safari, Opera */  -moz-column-count: 4;  /* Firefox */  column-count: 4;}
.item {  display: inline-block;  width: 100%;  border: 1px solid red;}.empty {  display: inline-block;}

<div class="columns">  <div class="item">Lorem ipsum dolor sit amet 1</div>  <div class="item">Lorem ipsum dolor sit amet 2</div>  <div class="item">Lorem ipsum dolor sit amet 3</div>  <div class="item">Lorem ipsum dolor sit amet 4</div>  <div class="item">Lorem ipsum dolor sit amet 5</div>  <div class="empty"></div>  <div class="item">Lorem ipsum dolor sit amet 6</div>  <div class="item">Lorem ipsum dolor sit amet 7</div>  <div class="empty"></div>  <div class="item">Lorem ipsum dolor sit amet 8</div>  <div class="item">Lorem ipsum dolor sit amet 8</div></div>

Css column-count should respect only first child

You seem to have misunderstood the purpose of column-count and are therefore misusing it.

It's purpose is to take some content and divide it into the given number of columns with as close to equal amounts of content as possible. The only tool you have is break-inside:avoid to keep "block-like" content together.

But if you do use it to make one column taller than the rest, your are making all columns the same height, because that's what CSS columns does. So, for example, using break-inside:avoid on .day. will cause other shorter .days to pile up in the same column. It would only work if days in your week had equal amounts of content, which is clearly not the case.

First question that comes in mind is: why not use flex? Since you probably want your day's widths equal, you need to add width to the children. By default display:flex children have flex: 0 1 auto, which makes them flexible, depending on contents.

.week {
    display: flex;
}
.week > * {
  width: calc(100% / 7)
}

Fiddle.

CSS columns bug — 5 column count only showing 4 (with images)

Ok I have an answer, although it is a workaround, not a fix. I changed up the images so that some were 300px in height and others, 370px. Basically I varied the the height of the images and kept the width of all the images the same, 300px. So the answer is to either not use square images, or if you want to use all square images, use column-count:4 instead of 5.

If anyone can provide further insight into why this happens that would be great.

CSS columns and margin issue

Currently, you're keeping the content from breaking between columns. However, the browser breaks the margin between columns, which is causing some of the columns to not start at the top.

Add this to your css:

.fx-column {
  display: inline-block;
}

You'll then have to give the columns a fixed width.

Know, however, that there are a lot of issues with using the column count css property. See this article for more information.

Edit: If you want the column widths to be responsive, you can simply set them to width: 100% so that they expand as the browser expands.

CSS DIV column-count height not adjusted

I have made few changes in your code here is demo: https://jsfiddle.net/4mepm5dL/

---

Changes:

HTML Line 11:
<div class="centeredForm optionListMainContainer" style="margin-top: -1.525em; float:right"> // added 'float:right'

HTML Line 55:
<div style='clear:both'></div> // added

CSS Line 247:

.centeredForm .formEntry > label,
.centeredForm .formEntry > input,
.centeredForm .formEntry > div {
    /*display: inline-block; //removed this line */
    padding: 0.125em 0.375em 0.1875em 0.375em;
}

---

Related Topics