Multiple Column Lists / Lista multiple de columnas con CSS
The markup
The markup is simple
<ul id="double">
<li>CSS</li>
<li>XHTML</li>
<li>Semantics</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Web Standards</li>
<li>PHP</li>
<li>Typography</li>
<li>Grids</li>
 <li>CSS3</li>
<li>HTML5</li>
<li>UI</li>
</ul>
And to make this into a multiple column list:
ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} /* 2 col */
#triple li  { width:33.333%; } /* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; } /* 6 col */
Good?
Source: CSSWIZARDRY.COM
Written by Pablo del Rio
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
 #Css 
Authors
Related Tags
#css
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#