cajas justificadas en una caja contenedor

Mikele777 · #1 (**permalink**) 26/11/2007, 07:29

Buenas, quisiera implementar un sistema de listas como el de esta web vuze.com/content/FeaturedContent.html. Yo he intendado hacer un capa contenedora y dentro de esta lo diversos divs alineados con display:inline, la primera fila me la hace correcta, pero luego todo se desmorona. Lo que he intentado (lo último después de varias cosas) es esto:

Código:

div#contenedor{min-width:810px; width:auto !important; widht:410px; padding:10px 0;}
div#col_izquierda{float:left; width:160px; padding:0 10px; text-align:center}
div#col_derecha{margin:0 0 0 191px; padding:0 20px; text-align:justify; solid grey}
div.item{display:inline; width:228px; margin:10px; background:grey}

<div id="contenedor">
  
  <div id="col_izquierda">barra de banners i enlaces</div>
  
  <div id="col_derecha">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
  </div>

Gracias de antemano!

Eourus · #2 (**permalink**) 27/11/2007, 02:24

¿Te refieres a donde pone, all, video, games y channels junto con sus desplegables? osea, ¿lo que son las pestañas?

Mikele777 · #3 (**permalink**) 27/11/2007, 02:47

hola,

Me refiero a los box de los videos, las cajas grises con imágenes (Alex gaudino, sanctuary, etc...). Si vas redimensionando el navegador, se van justificando perfectamente.

Gracias

Eourus · #4 (**permalink**) 27/11/2007, 02:54

Prueba con esto:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<style type="text/css">
	#contenedor span { width:150px; float:left; }
	.limpia { clear:both; }
</style>
<body>
<div id="contenedor">
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
	<span>6</span>
	<div class="limpia"></div>
</div>

</body>
</html>