I've got a weird issue with CSS columns under IE10.
css:
.columns {
-moz-column-count: 2; /* Firefox */
-webkit-column-count: 2; /* Safari and Chrome */
column-count: 2;
max-width: 450px;
min-width: 400px;
opacity: 0.9;
}
When the number of items is odd everything is fine, but when I've got an even number of items the top one is spit between two columns. Please see image
Please see here plunker http://plnkr.co/edit/8aKV6kHjhAIhRF26ZU0v?p=preview
column-count is working only >=IE10
Related
I am trying to create 9 columns in 3 rows of text in CSS. Each column is supposed to have a headline. Can you help me out a bit please. This is my text for creating the 9 columns but I cannot get the rows done.
.descpText {
-webkit-column-count: 9; /* Chrome, Safari, Opera */
-moz-column-count: 9; /* Firefox */
column-count: 9;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Thanks in advance!
Should look like this
Headline 1 Headline 4
blalalalalalla blalallalalallala
blallalalalaalal balalalallalalala
Headline 2 Headline 5
blalalalalallala blalalalalalalala
blalalalalalalla blalalalalalallaala
Headline 3
blalalalallala and so on.....
blalalalallala
Here you go, works flawlessly, not sure what is wrong with yours.
.descpText {
-webkit-column-count: 9;
-moz-column-count: 9;
column-count: 9;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
http://codepen.io/damianocel/pen/VvyRmb
I have placed the headlines for you there, but this layout is suboptimal, especially with headline block elements. I would rather do this with flexbox.
I've tried to read the number of columns from HTML attribute.
Something like this one:
div.columns[cols] {
column-count: attr(cols)
-webkit-column-count: attr(cols) /* Chrome, Opera, Safari */
-moz-column-count: attr(cols) /* Firefox */
}
It doesn't seem to work, and I don't know if I'm missing something or it just won't work. And if so, it would be nice to have a better solution than this:
div.columns[cols="2"] {
column-count: 2
-webkit-column-count: 2 /* Chrome, Opera, Safari */
-moz-column-count: 2 /* Firefox */
}
div.columns[cols="3"] {
column-count: 3
-webkit-column-count: 3 /* Chrome, Opera, Safari */
-moz-column-count: 3 /* Firefox */
}
div.columns[cols="4"] {
column-count: 4
-webkit-column-count: 4 /* Chrome, Opera, Safari */
-moz-column-count: 4 /* Firefox */
}
div.columns[cols="5"] {
column-count: 5
-webkit-column-count: 5 /* Chrome, Opera, Safari */
-moz-column-count: 5 /* Firefox */
}
Thank you ;)
No, you can't do that.
The permitted options per MDN are:
column-count: integer /* an actual number */
column-count: auto;
column-count: inherit;
column-count: initial;
column-count: unset;
You can actually do it just look at the grammar http://www.w3.org/TR/css3-values/#attr-notation although I've not tried it so I have no idea what the browser support is like.
You would need to use the data- prefix on the html attribute eg:
<div class="columns" data-cols="n">content</div>
And make sure you pass the second argument to attr so your css would look like this:
div.columns {
column-count: attr(cols integer)
-webkit-column-count: attr(cols integer)
-moz-column-count: attr(cols integer)
}
I have a paragraph inside the p tag and want to make the top half floating to the right and the bottom half to the left. Is there a property code I can use to do this inside the p tag or do I have to create a new id selector tag to do this?
Use CSS3's Multiple Column Layout
p{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
http://jsfiddle.net/sjmcpherso/0k3nnpas/
to get the bottom column on the left add
p{
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
direction:rtl;
text-align:left;
}
Note: CSS3 Columns are IE10+ see https://css-tricks.com/almanac/properties/c/columns/ for more details
I am having a problem where when I fill a html input box like:
If I add one character more it will fall out like:
This is the css:
form {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Here is a fiddle
I have tested this with chrome only.
Update
This does not happen in safari
Update 2
This does not happen in firefox
Here is the bug report
I'm using the following style sheet to wrap an UL...it causes the UL to wrap to the top of the next column when it reaches the bottom of the page.
This code works in Chrome but not in IE.
#limheight {
height: 350px; /*your fixed height*/
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
display: normal; /*necessary*/
}
Can anyone point me in the right direction?
You need to be using Internet Explorer 10 or above. If you are using Internet Explorer 9 or below, then the columns will not display as it does not support all CSS3 functions.