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.
Related
I am using Wordpress and Bootstrap 3 framework and using ...
HTML
<div class="col-md-12">
<?php the_content(); ?>
</div>
... to put the page content on the page. I want to put it in two columns (col-md-6) with the content spanning into two columns. but not sure how to do it.
You can leave the HTML with this structure, adding a simple class (maybe column-2), and using this CSS:
.column-2 {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
DEMO
Learn more about CSS columns here.
Note: Supported in all modern browsers (with prefixes) and IE 10+. See here.
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'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
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 want to display my records like Multiocol tag holds. tag may be no longer to use as only netscape supports.
Is there any alternative tag to support same like Operation here is an example
Check this out
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-count
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
You can use css3 to achieve the results like this:
div{
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
Or 2d-transforms like Multi-columns
And here is one with selectable option