problema con propiedad float de css

Luis Alfredo · 25 May 2012

podria alguien decirme en que estoy fallando? lo que trato de hacer es que cada una de las listas se ajuste perfectamente al espacio libre que dejan los demas elementos.
aca les dejo el codigo para que vean mi problema:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-…
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>prueba</title>
</head>
<style type="text/css">
*{
position:relative;
}

.center{
width:100%;
float:left;
}

.contenedor{
margin:auto auto;
width:820px;
}

.contenedor ul{
height:100%;
background:#CCCCCC;
padding:0px;
margin:0px;
float:left;
list-style:none;
}

.contenedor ul li {
display:list-item;
margin-bottom: 15px;
}

.derecho{
clear:right;
float:right;
}

.izquierdo{
clear:left;
float:left;
}

.contenedor ul li img{
background:#5AA0F5;
}
</style>

<body>
<div class="center">
<div class="contenedor">
<ul>
<li class="izquierdo "><img src="" style="height:220px; width:395px;" /></li>
<li class="derecho" ><img src="" style="height:150px; width:395px; " /></li>
<li class="izquierdo" ><img src="" style="height:120px; width:395px; " /></li>
<li class="derecho" ><img src="" style="height:150px; width:395px; " /></li>
<li class="izquierdo "><img src="" style="height:220px; width:395px; " /></li>
<li class="derecho" ><img src="" style="height:150px; width:395px;" /></li>
</ul>
</div>
</div>
</body>
</html>

Anunciante

estravagancia · 5 Jun 2012

Dilone dijo: ↑

podria alguien decirme en que estoy fallando? lo que trato de hacer es que cada una de las listas se ajuste perfectamente al espacio libre que dejan los demas elementos.
aca les dejo el codigo para que vean mi problema:
Hacer clic para expandir...

Hola Dilone
Para empezar, la capa con la clase "center" no te haría falta, pues ya especificas que la capa ".contenedor" tiene un ancho y un margen izquierdo y derecho en auto. Por lo tanto ya quedaría centrada.
Respecto a los elementos de listas, si pones todos flotando en un sentido (y al tener un ancho, en este caso determinado por la imagen que incluyes), creo que deberías conseguir el efecto que quieres.

saludos

Accede o regístrate

problema con propiedad float de css

Luis Alfredo Nuevo usuario

Anunciante

estravagancia Nuevo usuario

Accede o regístrate

problema con propiedad float de css

Luis Alfredo Nuevo usuario

Anunciante

estravagancia Nuevo usuario

Búsquedas útiles