Multi column formatting


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. #content div {
  2. -webkit-column-count : 10;
  3. -webkit-column-gap : 20px;
  4. -moz-column-count : 10;
  5. -moz-column-gap : 20px;
  6. }
  7.  
  8. div {
  9. column-rule: 1px #000000 solid;
  10. }
  11.  
  12. ---- HTML ----
  13.  
  14. <div class="section" id="content">
  15. <h3>About tweetCC <strong class="amp">&amp;</strong> why licensing your tweets matters</h3>
  16.  
  17. <div>
  18. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing venenatis elit ultricies tincidunt. In ut orci lectus, et volutpat sapien. Aliquam at neque pellentesque ligula ullamcorper lacinia non id leo. Vivamus ornare malesuada ultricies. Morbi consectetur dictum nunc id consequat. Quisque nec leo in ante ullamcorper commodo. Vivamus hendrerit nunc sed lorem dictum id condimentum massa adipiscing. Proin vehicula nulla in metus rhoncus pellentesque. Curabitur in tempor dolor. Morbi eu leo non leo convallis semper quis sed urna. Nullam et erat elit, vitae adipiscing felis. Pellentesque at justo ut odio rutrum euismod.</p>
  19. <p>Donec vestibulum purus id purus vulputate tincidunt. Aliquam sit amet magna in elit fermentum interdum vitae eu orci. Fusce sodales molestie laoreet. In aliquet orci purus. Proin dolor metus, pharetra quis consectetur nec, dignissim in enim. Duis nec enim eu ipsum consequat consectetur eu rutrum arcu. Fusce ac placerat mi. Vivamus fringilla molestie rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut libero odio, pretium ut convallis ac, mattis eget risus. Vivamus sit amet justo orci. Suspendisse a rutrum orci. Ut consectetur justo sed dui tincidunt sagittis. In vel metus vel urna consequat ornare. Vivamus dictum leo et tortor tempor faucibus.</p>
  20. <p>Nam purus ligula, auctor eu rutrum nec, volutpat nec nisl. Maecenas lacinia metus in sapien vestibulum id dapibus nulla lacinia. Cras purus nisi, tincidunt eget condimentum eget, hendrerit quis ipsum. Vivamus convallis ornare metus, quis posuere diam venenatis ac. Nam ac augue risus, vel posuere augue. Mauris congue tempus felis sed volutpat. Proin consectetur ullamcorper nisi, id molestie lorem ultrices a. Sed non massa quis lacus placerat tempus. Nulla mattis leo tristique augue porta sit amet cursus odio sollicitudin. Aliquam orci sem, auctor id mattis vel, facilisis eget nibh. Etiam rhoncus, nulla in placerat vestibulum, dui sem pharetra lacus, sit amet feugiat ante felis non felis. Proin dignissim scelerisque gravida. </p>
  21. </div>
  22. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.