clearboth y br

[Nateskin]

hola chicos!!
encontrando por ahi tutoriales de como hacer un clear para divs floantes encontre que la mejor manera era poner al final del div el siguiente codigo:

Código:

<div id="container">
      <div id="contenido1">
            a
      </div>
      <div id="contenido2">
            a
      </div>
      <br class="clear" />
</div>

y el stylesheet lo tengo asi:

Código:

.clear {
	clear: both;
}
#container { 
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
#contenido1{
	float: left;
	height: 200px;
	width: 200px;
}

#contenido2{
	float: left;
	height: 200px;
	width: 200px;
}

el caso es que me hace un espacio (como es obvio es BR) pero no comprendo la manera de como quitar el espacio que me hace debajo, ya que haciendolo por DIV, si al style de CONTAINER le pongo un fondo no se ve, pero en BR si.

hay manera de quitar el espacio? o de hacer el div y que funcione con un fondo?
un saludo!! y gracias

[furoya]

Hola Nateskin :

Quizá te sirva

Poner dos divs al mismo nivel sin position:absolute

[yoguuu]

Hola, no te hace falta usar los <br />, si tu lo que quieres hacer son dos bloques flotando al lado el uno del otro y despues ademas quieres hacer que el siguiente elemento se posicione debajo. lo unico que tienes que hacer es:

Suponemos que BlockA y BlockB son los que tienen float: left; por que son los que quieres que esten al lado... BlockC el que quieres que se pasé abajo... Pues es a BlockC al que le tienes que poner clear: Both; para que ignore tanto el float left como el right que le hayas indicado a los distintos elementos dentro del contenedor.

Este ejemplo funciona, puedes copiarlo y guardarlo en un .html y verlo.
Espero te ayude ;)

Código HTML:

<style>
#contenedor {
	background-color: #666;
	color: #fff;
	width: 240px;
	height: 240px;
	border: 3px solid #333;
}
#blockA {
	background-color: #000;
	color: #fff;
	width: 100px;
	height: 100px;
	border: 10px solid #0f0;
	float: left;
}
#blockB {
	background-color: #000;
	color: #fff;
	width: 100px;
	height: 100px;
	border: 10px solid #f00;
	float: left;
}
#blockC {
	background-color: #000;
	color: #fff;
	width: 220px;
	height: 100px;
	border: 10px solid #00f;
	clear: both;
}
</style>

<div id="contenedor">
	<div id="blockA">Bloque 1</div>
	<div id="blockB">Bloque 2</div>
	<div id="blockC">Bloque 3</div>
</div>