Problemas para hacer funcionar el clear: both correctamente

[haga41]

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

[StarClown]

Acabo de intentar ayudarte arreglando tu CSS pero NA'... coloqué el clear:both; por todas partes e incluse probe hacer otras cosas y no funcionó NADA!

Espero que alguien te de la respuesta a este problemilla. Un saludo!

[kseso?]

Hola Haga41
Creo que estás queriendo hacer con el div de corte (o limpiador) algo para lo que no está concebido ni puede hacer.
Me refiero a crear columnas equilibradas (misma altura independientemente del contenido en ellas).

Si estoy en lo cierto, mira a ver si esta composición puede ayudarte:
www.css.devillasbuenas.es/2columnas.html
Es una adaptación de otra que era otra desde otra... y sólo la he mirado en ff e ie7
Si la encuentras útil y te atoras en algún punto al adaptarla, ya comentarás.

Un saludo

[loncho_rojas]

Se estan burlando verdad?

coloqué el clear:both; por todas partes

Como si el clear fuese magico.

haga.. Podrías explicarte un poco mejor al respecto de tu problema.. no vi grandes problemas en tu codigo... pero tampoco entiendo que es lo que deseas conseguir, a pesar de que lo leo una y otra vez..

Si veo problemas en las medidas..
tu contenedor: 966px-- uno de tus modulos: 350px; y el otro 616px... es decir, salvo que alguien me corrija, es preferible que los modulos de contenido no sean exactos con respecto al contenedor.. es decir, que la suma de los contenidos no deberian llegar a las medidas del contenedor, y mas aun con flotadores, pues te traeran muchos conflictos en los navegadores...

Aun asi, no se cual es tu real problema

[StarClown]

Iniciado por loncho_rojas

Se estan burlando verdad?



Como si el clear fuese magico.

haga.. Podrías explicarte un poco mejor al respecto de tu problema.. no vi grandes problemas en tu codigo... pero tampoco entiendo que es lo que deseas conseguir, a pesar de que lo leo una y otra vez..

Si veo problemas en las medidas..
tu contenedor: 966px-- uno de tus modulos: 350px; y el otro 616px... es decir, salvo que alguien me corrija, es preferible que los modulos de contenido no sean exactos con respecto al contenedor.. es decir, que la suma de los contenidos no deberian llegar a las medidas del contenedor, y mas aun con flotadores, pues te traeran muchos conflictos en los navegadores...

Aun asi, no se cual es tu real problema

No me burlo ni tampoco uso los códigos como artes mágicas jaja es solo que le cambié de sitios como en tres ocasiones (obviamente en sitios en que se puede y debe usar dentro del CSS) y aun así no pasó nada de lo que la Srta. o el caballero pide. Que malo eres!

[haga41]

Muchas gracias a todos por responder,

loncho_rojas
Lo que quiero es lo que ha explicado kseso?, es decir que cuando se acabe el texto principal en la parte derecha de la web antes que en la izquierda, es decir cuando la altura se quede corta, el hueco que queda hasta abajo se rellene con el color de fondo y la anchura del bloque derecho es algo como lo que sale en la web que ha puesto kseso?, el caso es que intentado adaptar el estilo "izquierda" de esa web al equivalente para lo que quiero hacer en la mía "bloque_d" y a pesar del "overflow:hidden" el texto se me sale por debajo y por detrás de la capa de pie de página. Este es el estilo que tengo ahora para bloque_d:

Código HTML:

.bloque_d{
	float:right;
	background:#FFFFFF none repeat scroll 0 0;
	width:616px;
	overflow:hidden;
	margin-bottom:-5000px;
	padding-bottom:5000px;	
}

Por otra parte no entiendo muy bien lo de que la anchura no debe ser exacta para no tener problemas con navegadores, hasta ahora siempre lo he hecho así para IE6, IE 7 y Firefox (creando hojas de estilo por separado para cada uno claro y retocando lo que hacía falta en cada caso) y creo que las webs se veían correctamente. ¿A qué te refieres exactamente con eso?¿Cuál sería la mejor forma de hacerlo?

[kseso?]

Lo tienes fácil, Haga41, hasta que comprendas que hace qué en mi ejemplo y puedas trasladarlo a tu composición:
coloca en "#izquierda" y "#centro" tus contenidos.

Un saludo

[haga41]

Muchas gracias kseso?, eso haré. A ver si dentro de poco saco un rato libre y puedo mirar tu ejemplo más detenidamente para ver cómo funciona.