Alan Kellogg Posted March 28, 2015 Share Posted March 28, 2015 Has anyone worked on using HTML to put text into columns? I know you can fake it using table HTML, but at times that can have problems. Link to comment Share on other sites More sharing options...
tejasamrute Posted March 28, 2015 Share Posted March 28, 2015 p { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5;}<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p> Link to comment Share on other sites More sharing options...
tejasamrute Posted March 28, 2015 Share Posted March 28, 2015 For more info check http://www.w3schools.com/css/css3_multiple_columns.asp Link to comment Share on other sites More sharing options...
Alan Kellogg Posted March 29, 2015 Author Share Posted March 29, 2015 p { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5;}<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p> Where does it go? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 29, 2015 Share Posted March 29, 2015 Its shown how to use in 'try it yourself' example with link provided in post #3 Link to comment Share on other sites More sharing options...
Alan Kellogg Posted March 31, 2015 Author Share Posted March 31, 2015 p { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5;} Tried that, didn't work. This did; #content p {margin: 0;} Link to comment Share on other sites More sharing options...
dsonesuk Posted March 31, 2015 Share Posted March 31, 2015 #content p {margin: 0;}On its own this will only remove spacing between paragraphs, so it becomes one big block of text, it won't create columns. Link to comment Share on other sites More sharing options...
Alan Kellogg Posted March 31, 2015 Author Share Posted March 31, 2015 #content p {margin: 0;}On its own this will only remove spacing between paragraphs, so it becomes one big block of text, it won't create columns. I'm aware of that. So I added more coding and got the look I currently have. However, the CSS provided for columns didn't work on my site, with text from one paragraph bleeding over to the other column. Here is the code I used, with "p" replacing "div" div { -webkit-column-width: 100px; /* Chrome, Safari, Opera */ -moz-column-width: 100px; /* Firefox */ column-width: 100px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted March 31, 2015 Share Posted March 31, 2015 Look into forcing column breakshttps://css-tricks.com/almanac/properties/b/break-inside/ Link to comment Share on other sites More sharing options...
tejasamrute Posted April 1, 2015 Share Posted April 1, 2015 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><style type="text/css">p { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5;}</style></head><body><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p></body></html> This code works.... Link to comment Share on other sites More sharing options...
dsonesuk Posted April 1, 2015 Share Posted April 1, 2015 But the op does not when using multiiple paragraphs that the paragraph/s when related to specific subject moves to another column (i think), so you need to break after each specific paragraph, or header maybe better option. That is when my last post code comes in depending on op needs. Link to comment Share on other sites More sharing options...
Alan Kellogg Posted April 1, 2015 Author Share Posted April 1, 2015 But the op does not when using multiiple paragraphs that the paragraph/s when related to specific subject moves to another column (i think), so you need to break after each specific paragraph, or header maybe better option. That is when my last post code comes in depending on op needs. That is my experience. I have to ask, has anybody tried the code inline? Link to comment Share on other sites More sharing options...
Alan Kellogg Posted April 1, 2015 Author Share Posted April 1, 2015 Look into forcing column breakshttps://css-tricks.com/almanac/properties/b/break-inside/ Bad news, didn't work. Link to comment Share on other sites More sharing options...
tejasamrute Posted April 1, 2015 Share Posted April 1, 2015 seems like something's saffecting your p tag........is there any style overlapping your p tag in other css files...can you also show us your html n css code...to get a better view...of what's going wrong.... Link to comment Share on other sites More sharing options...
Alan Kellogg Posted April 1, 2015 Author Share Posted April 1, 2015 seems like something's saffecting your p tag........is there any style overlapping your p tag in other css files...can you also show us your html n css code...to get a better view...of what's going wrong.... I don't know, and I don't know how to find out. Link to comment Share on other sites More sharing options...
Alan Kellogg Posted April 1, 2015 Author Share Posted April 1, 2015 (edited) I suspect it has something to do with the theme I'm using, Catch Evolution (Word Press) Then I change themes and the custom CSS disappears. <Sigh> Edited April 1, 2015 by Alan Kellogg Link to comment Share on other sites More sharing options...
Alan Kellogg Posted April 1, 2015 Author Share Posted April 1, 2015 I give up, if it aint the theme, it's the plugin. I may try again later, but for now I'm taking a break. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 1, 2015 Share Posted April 1, 2015 The link i gave is the wrong one, try this <!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> .column-this01, .column-this02 { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; overflow: hidden; width: 960px; margin: 0 auto; } .column-this01 p { -webkit-column-break-after: always; break-after: column; display: inline-block; } .column-this02 > * { -webkit-column-break-after: always; break-after: column; display: inline-block; } </style> </head> <body> <div class="column-this01"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim PARAGRAPH END.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim PARAGRAPH END.</p> <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus PARAGRAPH END.</p> <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus PARAGRAPH END.</p> </div> <hr> <div class="column-this02"><div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim .</p> <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. ###### sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim END of subject content</p></div> <div><p> Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p> <p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. END of subject content</p></div> </div> </body></html> The first class prevents paragraph breaking in to another column, but its following sibling paragraph of current related subject will. The section class target wrapping container (I used div, but you can change it to section (outer div) and use article(in place of inner div)) to make sure the paragraph/s relating to specific subject remain in own column. Link to comment Share on other sites More sharing options...
Alan Kellogg Posted April 4, 2015 Author Share Posted April 4, 2015 Didn't work. You have to do it internally or inline, and when using a Wordpress theme you'll lose the coding with each update of that theme. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 4, 2015 Share Posted April 4, 2015 IT does work, you don't have to do it internally or inline, and if you have not setup wordpress theme in such a way that it never overrides your current styling on updating, it does not mean it does not work, it means the problem is YOU NEED TO SET IT UP TO NEVER OVERRIDE YOUR CURRENT THEME STYLING. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now