Foros del Web » Creando para Internet » CSS »

clearboth y br

Estas en el tema de clearboth y br en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/04/2006, 17:13
 
Fecha de Ingreso: junio-2002
Mensajes: 321
Antigüedad: 15 años, 5 meses
Puntos: 3
clearboth y br

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
  #2 (permalink)  
Antiguo 08/04/2006, 11:11
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola Nateskin :

Quizá te sirva

Poner dos divs al mismo nivel sin position:absolute
  #3 (permalink)  
Antiguo 08/04/2006, 21:55
 
Fecha de Ingreso: enero-2005
Mensajes: 149
Antigüedad: 12 años, 11 meses
Puntos: 2
No te hace falta usar <BR />

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> 
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:26.