Implementing a multi column layout with independent row heights - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Column

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Column

Description

Implementing a multi column layout with independent row heights

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum</title> 
  <style>
div.listing {
   -moz-columns:16em;
   -webkit-columns:16em;
   columns:16em;
   -moz-column-gap:2em;
   -webkit-column-gap:2em;
   column-gap:2em;
}

div.listing article {
   -webkit-column-break-inside:avoid;<!--from w w  w .  j a  v a2s.c  o  m-->
   page-break-inside:avoid;
   break-inside:avoid;
}

div.listing article {
   -moz-border-radius:0.6em;
   -webkit-border-radius:0.6em;
   border-radius:0.6em;
   margin:2em 0;
   background-color:Chartreuse;
   padding:.6em;
}

div.listing article:first-child {
   margin-top:0;
}

div.listing article:nth-child(odd) {
   background-color:yellow;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="listing"> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendre 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper mo 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed f 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi u 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. A 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed f 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, l 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vita 
   </article> 
   <article>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempo 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials