Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/10/2009, 04:49
haga41
 
Fecha de Ingreso: junio-2008
Mensajes: 145
Antigüedad: 15 años, 10 meses
Puntos: 0
Problemas para hacer funcionar el clear: both correctamente

Hola a todos,

Estoy intentando crear una especie de blog iba todo bien hasta que he intentado usar el "clear:both" para que me rellene con el color de fondo que yo quiera los sitios en los que el texto se queda corto, lo he colocado donde está ahora y en otros sitios pero no he conseguido hacerlo funcionar.

Si pudieráis darme alguna pista de que estoy haciendo mal os lo agradecería mucho.

Código HTML:
<div class="contenedor">
<div class="todo">
<div class="blog">
<div class="bloque_i">
    <div class="texto_informacion">
    <h2>Más información</h2>
<p>
Texto auxiliar
</p>
<div class="foto">
<img src="imagenes/foto.jpg" />
</div>
<ul>
    <li><a href="anadir_comentarios.php">A&ntilde;adir  comentario</a></li>
    <li><a href="ver_comentarios.php">Ver comentarios (0)</a></li>
</li>
</ul>
</div>
</div>
<div class="bloque_d"><h2>Post nº 2</h2>
<p>
Texto del post
</p>
</div>
<div class="espacio"></div>
</div>
</div>
        <div class="pie">
            <p>Blog de pruebas</p>
        </div>
</div>
</body>
</html> 
Y estos los estilos CSS para Frirefox, aún no tengo la hoja creada para IE.

Código HTML:
.contenedor{
	width:966px;
	margin: 0 auto;
}
.todo{
	float:left;
	width:100%;
	margin:0;
	padding:0;
	background-color:#666666;
}
.blog{
	float:left;
	margin:0;
	padding:0;
	width:100%;
	border-bottom:1px solid #000000;
}
.bloque_i{
	float:left;
	background-color:#666666;
	width:350px;
}
.bloque_i ul{
 	list-style:none;
	margin:0;
	padding:0;
}
.bloque_i ul li{
 	list-style:none;
	display:inline;
	margin:5px;
	padding:0;	
}
.texto_informacion{
	float:left;
	margin:10px;
	padding:5px;
	border:1px solid #000000;
	background-color:#FFFFFF;
}
.texto_informacion p{
	text-align:justify;
	padding:5px;
}
.texto_informacion h2{
	margin-top:10px;
	padding:10px;
	text-decoration:underline;
	text-align:center;
}
.foto{
	float:left;
	width:306px;
	border:0;
	margin:5px;
	padding:0;	
}
.foto img{
	width:306px;
	height:172px;
	border:1px solid #000000;
	margin: 0 0 5px 0;
}
.bloque_d{
	float:right;
	background-color:#FFFFFF;
	width:616px;

}
.bloque_d h2{
	font-size:1.8em;
	margin:0;
	padding:15px 0 10px 10px;
}
.bloque_d p{
	padding:10px;
	text-align:justify;
}

.espacio{	
	clear:both;
}
.pie{
	float:left;
	width:946px;
	height:30px;
	margin:0;
	padding:0 10px 12px 10px;
	background-color:#000000;
	color:#FFFFFF;
	font-weight:bold;
}