I'm trying to leverage the css 'column-count' in combination with CSS padding, and and I'm observing that if I specify a column count of 3, the browser renders part of a fourth column if content doesn't fit. as shown below
Here is a JSFidle -> https://jsfiddle.net/w40jcykp/1/
I'm seeing this in Chrome & Edge. is this a known issue, or is there a workaround for this?
Thank you kindly.
The CSS below.
.newspaper {
column-count: 3;
min-height:144px;
height:144px;
padding:20px;
column-gap:10px;
border: 1px solid black;
overflow:hidden;
}
I think the issue here is that you've set a fixed height on your container. With the fixed height, the columns can't grow, so the rendering engine keeps making more columns to fit your content inside the container.
If you turn off overflow: hidden in your fiddle, you'll see that there actually a bunch more columns overflowing out of the side of your box. The padding just allows part of one of them to be visible.
The root cause here is height balancing. From MDN:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal. Firefox does this.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Since you've set the height, height balancing says that the browser will fix columns to that height, and will create as many columns as it needs to display your content.
You'll need to remove your fixed height if you want your columns to grow and flow correctly and obey your column-count property.
Related
I have an element that is 50% width, and inside that element are two more elements, one of the elements is a fixed 100px wide, and I want the other element to take up the rest of the containing element, but cant work it out.
The element I want to take up the remaining space in the container has this css
#header_search {float:left; width:50%}
Obviously 50% with isnt right. But not sure what it should be.
https://jsfiddle.net/mux7e7b4/
How is that done?
Give the element you want to take up most of the width the following CSS,
width: calc(100% - 100px);
Here's how it would look in your example (updated your fiddle)
Note that the input element has a border around it which sets off calculations, so box-sizing:border-box; is necessary to include the border within the total element width.
Calc() is not recognized in IE8 and below.
It also doesn't work on some older Android phones that haven't been updated.
Best practice is to use some kind of a fallback for graceful degradation, depending on your specific use-case.
I want to utilize CSS3 Columns around my site as it on wide pages provides a better UX for the users. However if I use CSS3 Columns, sometimes the left column is full (lets say 20 lines of text) and the right side only have2 lines of text. Can I with pure css3 (maybe Flexbox) make it have equal amount of content? Or do I need JS to fix this?
Beaware I'm not talking about equal height, but equal amount of content :)
You'll need to specify a height property.
From the Mozilla docs:
The CSS3 Column specification requires that the column heights must be
balanced: that is, the browser automatically sets the maximum column
height so that the heights of the content in each column are
approximately equal.
However, in some situations it is also useful to set the maximum
height of the columns explicitly, and then lay out content starting at
the first column and creating as many columns as necessary, possibly
overflowing to the right. Therefore, if the height is constrained, by
setting the CSS height or max-height properties on a multi-column
block, each column is allowed to grow to that height and no further
before adding new column. This mode is also much more efficient for
layout.
Sorry it was a padding-bottom which messed it up. When I remove that it spreads out nicely. Strange!
I've got a responsive 2 column layout going on. The first column is a fixed width, while the second one is using the css calc property to subtract certain pixels from its 100% width.
What I want the second column to do is to scroll horizontally, regardless of the screen size or width of it. I threw together a quick pen to illustrate what I'm trying to do: http://codepen.io/trevanhetzel/pen/nbdIt
As you can see, the second column has multiple .thing divs inside of it that are floated left and have a defined width. What I DON'T want is for these .thing divs to drop down to another line when they run out of room inside the second column.
How can this be achieved? I tried messing the overflow property, but I think I might need another container div with some different positioning properties or something. Any advice?
Here you go: http://codepen.io/seraphzz/pen/lutjb
The solution to this is:
Change .thing from float: left; to display: inline-block;. This keeps those elements in line, but also keeps them in flow so the parent element acknowledges it has children
Give section a white-space: nowrap; property. This prevents the .thing elements from going to another line.
Give section an overflow-x: auto property. This allows the div to be scrolled horizontally, but hides the scrollbar if there are not enough children to need it.
Lastly, give section a font-size: 0 property. By default, elements that are display: inline-block are treated like text, and are thus given an automatic margin. Setting font-size: 0 on the parent of those elements removes that automatic margin, allowing you to set the margin as you like. Remember, you will need to manually set the font-size of these child items if they contain text.
Please note that I am not trying to resolve any specific issue, but trying to understand what's causing this issue.
I have set the width, height and display of some divs, but the height/width settings are not being honored. The text is also being pushed downward.
http://jsfiddle.net/k7esv/
1) Why does it push the text downward when height is set in table-row then BUT when height is removed, it places text at the top?
2) Why are the width/height settings not honored?
3) Why doesn't setting the margin property have any effect on them either?
http://jsfiddle.net/k7esv/1/
1) This seems to be a rendering issue specific to Firefox. Setting the vertical-align property on the divs fixes it. top, middle, or bottom all seem to work. I don't understand myself what FF is doing when there is a height but no vertical-align set; it might be a bug.
2) The width and height are honored, but they are subject to table sizing rules. When a table does not have enough room to give each of the cells the width they have specified, it will give more room to cells that have more content. This is what was happening with your example. If you look at my example below, you will see that when the parent element is wider than the sum total of the table cells' widths, the cells respect the width. The height should always work (except in the case of the FF rendering issue I mentioned above).
3) Table cells don't have margins. Use border-spacing and display:table on a parent div.
http://jsfiddle.net/chad/k7esv/3/
I will just add (seeing as it seems to have been missed) that setting the heights on individual table cells in a table row can be pointless, as all cells in the same table row will become the same height as the tallest cell in said row.
Having said that, heights may want to be added for when dynamic content is served to different cells, meaning their heights fluctuate. It may be that you want to set a particular cell to never be less than height X, which will only come in to effect when another certain cell has less content.
I have a <table> with CSS property of width: auto, which has a variable number of columns. The rightmost column has no width set. In IE8/Firefox3.6.12 the table resizes as desired according to the content width of that column. <table>). In IE7, it fills out to the right border of the containing . By setting the width of that column in CSS, I was able to get it to display with the same width across IE7/IE8/Firefox3.6.12.
I dont know if I understood right your question but, Did you try adding a width:auto; to THAT column in particularly???
What I would probably try If I would be working with tables in IE is to have most of the elements with a defined widht and height. Sometimes when there is no specification the elements doesnt display...
Maybe thats the problem...
If not, please add some code so we can see better your problem.