Columnas con UL y LI

[American2010]

Me pueden ayudar con esto, no es la primera vez que me pasa, pero nunca encuentro cual es el "truquito" que me permite arreglar este error...

Quiero pasar de esto:


A 3 columnas, pero me pasa esto...


El CSS de esa parte es:

Código HTML:

/* Post */
#post {
	width:500px;
	margin:0 auto;
	padding:5px 0;
}

#post ul {
	padding: 0px; margin: 0px; width: 486px; border: 1px coral dashed;
}
#post li {
	background: url(images/dot.gif) no-repeat left top;
	background-repeat: no-repeat;
	background-position: 0 .65em;
	padding: 1px 0px 1px 12px;
	list-style-type: none;
	border: 1px black dashed;
	width: 162px;
}
.postcontent {
   padding:5px;
   border: 1px solid #a0abb4;
   margin-bottom:10px;
}

Código de la página es:

Código HTML:

<div id="post">

<div class="title"><a href="europe/" rel="bookmark" title="Link to Europe">Europe (55)</a>
</div>

<div class="postcontent">
<div id="divListado">
<ul class="col">
<li><a href="europe/austria/">Austria</a> (12)</li>
<li><a href="europe/estonia/">Estonia</a> (2)</li>
<li><a href="europe/finland/">Finland</a> (3)</li>

<li><a href="europe/france/">France</a> (8)</li>
<li><a href="europe/germany/">Germany</a> (2)</li>
<li><a href="europe/hungary/">Hungary</a> (6)</li>
<li><a href="europe/italy/">Italy</a> (5)</li>
<li><a href="europe/liechtenstein/">Liechtenstein</a> (1)</li>

<li><a href="europe/netherlands/">Netherlands</a> (3)</li>
<li><a href="europe/norway/">Norway</a> (2)</li>
<li><a href="europe/poland/">Poland</a> (2)</li>
<li><a href="europe/spain/">Spain</a> (2)</li>
<li><a href="europe/united-kingdom/">United Kingdom</a> (7)</li>

</ul>
</div> <!-- Cierro divListado -->
</div> <!-- Cierro post-content -->
</div> <!-- Cierro post -->
<div id="post">
<div class="title"><a href="oceania/" rel="bookmark" title="Link to Oceania">Oceania (13)</a>
</div>

<div class="postcontent">
<div id="divListado">
<ul class="col">
<li><a href="oceania/australia/">Australia</a> (10)</li>

<li><a href="oceania/new-zealand/">New Zealand</a> (3)</li>
</ul>
</div> <!-- Cierro divListado -->
</div> <!-- Cierro post-content -->
</div> <!-- Cierro post -->
<div class="clear"></div> 

Si necesitan algun dato más me avisan, yo voy a seguir haciendo pruebas a ver si logro algo

[American2010]

Hice estos cambios...

Código HTML:

#post ul {
	padding: 0px;
	margin: 0px;
	width: 486px;
	display: block;
	float: left;
}

#post li {
	background: url(images/dot.gif) no-repeat left top;
	background-repeat: no-repeat;
	background-position: 0 .65em;
	padding: 1px 0px 1px 10px;
	list-style-type: none;
	width: 150px;
	float: left;
}
.title {
    background: #e4e5d4 url(images/postbg.gif);
	padding:3px;
	padding-left:10px;
	font-size: 14px;
	text-transform:uppercase;
    font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;	
	float: left;
	width:487px;
}
.postcontent {
   padding:5px;
   border: 1px solid #a0abb4;
   margin-bottom:10px;
   float: left;
}

Con eso se ve bien, quizás no sea la forma correcta y no lo probé en otros navegadores...

[PrendekZ]

Tienes 13 Bloques.

Coloca cada bloque de 5..

#post ul {
padding: 0px;
margin: 0px;
width: 486px;
display: block;
float: left;
height:100px;
}

modifica el parametro

height:100px;

por los pixeles deseados de altura.

Saludos ;)

[stock]

eso pasa porque los elementos de la lista los estas poniendo flotantes, al hacer eso se separan del flujo natural de html (estático) y por lo tanto los elmentos que estan por debajo de la lista continuan con el flujo normal haciendo que la lista flote como bien lo has esppecificado en el CSS.

La solución mas elegante es usar un "clearfix" en la el contenedor de la lista:

Código:

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

de esta manera el contenedor de la lista se ajustará al tamaño de la lista flotante.

saludos

[American2010]

Gracias... Lo voy a tener en cuenta para estos casos, ya que muchas veces me lío...

PD: ¿Es este caso uno de los típicos en dónde si sería correcto seguir usando tablas?

Yo creo que no, pero no estoy seguro, sólo se que usar tablas me complicaría un poco más el código php :P

[American2010]

Iniciado por PrendekZ

Tienes 13 Bloques.

Coloca cada bloque de 5..



modifica el parametro



por los pixeles deseados de altura.

Saludos ;)

El problema es que la altura es variable, por eso no me servía esta solución...