Multiples columnas utilizando listas y CSS

http://Bestbettafish.com/

rear listas con multiples columnas en nuestra Web es una manera muy utíl de reducir espacio innecesario y aprovecharlo con otros modulos, por ejemplo en mi blog tengo una lista de categorías en el sidebar, estan en 2 columnas y para mi encajan a la perfección.

Para lograr este objetivo solo es necesario crear una lista (ul) y convertir las filas(li) en elementos flotantes, dandole como ancho una medida en porcentaje, si queremos utilizar 2 columnas debemos colocar como ancho un 50% (width:50%;).

HTML: Armaremos la lista HTML.

  • CSS
  • XHTML
  • Semantics
  • Accessibility
  • Usability
  • Web Standards
  • PHP
  • Typography
  • Grids
  • CSS3
  • HTML5
  • UI

CSS: Crearemos clases para tipos de columnas.

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;
}

.dos_columnas li { width:50%;}
.tres_columnas li { width:33.333%; }
.cuatro_columnas li { width:25%; }
.cinco_columnas li { width:16.666%; }

Ejemplo HTML

jfdghjhthit45

También te puede interesar

4 Comments

  1. Faust
    feb 19, 2010 @ 22:41:30

    Buen tuto, thx, me servira en mi blog y en futuros proyectos!!

  2. Multiples columnas utilizando listas y CSS (opcion no-CSS3) « Kgë3n_t0d0L_CSS
    feb 18, 2011 @ 03:23:24

    [...] Multiples columnas utilizando listas y CSS. [...]

  3. Lenyman
    mar 29, 2011 @ 14:44:00

    Perfectamente explicado!
    Una duda… cómo sería si necesitara que las columnas no fuesen de anchos iguales?

  4. Lenyman
    abr 06, 2011 @ 13:06:44

    Muy interesante y util! Gracias.

    Una duda: como sería si necesitos las columnas pero de distintos anchos?