Foros del Web » Creando para Internet » CSS »

Ayuda con etiquetas div

Estas en el tema de Ayuda con etiquetas div en el foro de CSS en Foros del Web. Saludos quisiera saber por que al darle a una etiqueta la propiedad flotar, esta se sale de la etiqueta q le contiene. Tengo la siguiente ...
  #1 (permalink)  
Antiguo 13/08/2007, 14:57
 
Fecha de Ingreso: agosto-2007
Mensajes: 1
Antigüedad: 10 años, 4 meses
Puntos: 0
Ayuda con etiquetas div

Saludos quisiera saber por que al darle a una etiqueta la propiedad flotar, esta se sale de la etiqueta q le contiene. Tengo la siguiente linea de etiquetas:

<body> <div#contenedor> <div#bloque><div#naveg>

la etiqueta <div#naveg> tiene la propiedad

float: left;

esta al ser un poco mas alta que el contenido de <div#bloque> se sale.

En Internet explorer no hay ningun problema, al colocar la propiedad

height:auto; o height:100%;

pero en Mozilla firefox si se ve mal, mas aun se ve tal cual que en el dreamweaver .

Lo mismo me sucede con las imágenes que se les da esa propiedad flotar. Se que puedo solucionarlo al colocar las etiquetas en celdas, pero no quiero utilizar tablas solo etiquetas div.

Agradezco cualquier ayuda, lo mas pronto posible. De antemano gracias.
  #2 (permalink)  
Antiguo 13/08/2007, 18:49
 
Fecha de Ingreso: febrero-2005
Mensajes: 9
Antigüedad: 12 años, 9 meses
Puntos: 0
Re: Ayuda con etiquetas div

si se ve mal en el dreamweaver es porke esta mal hecho de todos modos que se vea bien en ie y mal en firefox es porke esta muy mal hecha
aki un ejemplo rapido

CSS
#contenedor { width:700px; margin:0 auto; border:0; padding:0; }
#izquierda { width:500px; margin:0 auto; border:0; padding:0; float:left; }
#izquierda { width:199px; margin:0 auto; border:0; padding:0; float:left; }

HTML
<div id="contenedor">
<div id="izquierda"><p>IZQUIERDA</p></div>
<div id="derecha"><p>DERECHA</p></div>
</div

ojala hayas entendido suerte
  #3 (permalink)  
Antiguo 13/08/2007, 21:39
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Ayuda con etiquetas div

Hola

La capa sale de su contenedora porque eso es exactamente lo que implica la propiedad float, tal como lo puedes leer en su definición.

Los objetos "flotados", salen del flujo normal de la página y por lo tanto no siguen las reglas de posicionamiento implícito referente a los otros elementos.

Sobre las dimensiones de sus contenedoras, ahí tenemos otro problema y es la aplicación de la propiedad height. Es un poco complicado explicar porque en unos funciona de una manera y en otros de otra, pero resumiendo mucho la situación, esto viene dado por las herencias de ciertas propiedades, el considerar o no al objeto html como de bloque o no, considerar al body como de bloque o no y la semántica que determina que es 100% de altura.

Esta puede ser una buena estructura básica para que practiques:


Te sugiero que hagas un diseño sencillo de prueba hasta que te familiarices con los comportamientos del float y las dimensiones,

Código HTML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #ccc; }
		#Base { width: 100%; background-color: inherit; border: 1px solid #f00;}
	</style>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
</div>
</body>
</html> 
Como puedes ver, es un documento vacío con una única capa y un borde para que la veas bien.

Felicidad
__________________
¡ hey, hou, hou, hey !
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 07:34.