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