Comunidad de diseño web y desarrollo en internet online

Problema con Float

Citar            
MensajeEscrito el 02 Ene 2006 06:12 pm
Bueno, mi problema es el siguiente:

Estoy intentando hacer una pagina con CSS, por que esta más bonito :love: jajajajja...

Bueno, la cosa va así, mi div principal no me esta abarcando los divs que quiero meter.

Le estoy metiendo un float y los pongo como quiero que se vean, pero en IE si me lo hace bien :crap: (si yo tambien me sorprendi), y en FireFox no, ahora con esto e llegado a la conclusión de que estoy haciendo algo verdaderamente mal como para tal calamidad.

Y bueno, aqui unos screen de lo que me hace y de lo que quiero hacer.

En FireFox:


En IE:


Como aparece en IE es como quiero que se vea, y bueno ya trate de varias formas y no me respeta lo que quiero hacer.

Ahora bien, el codigo del CSS:

Código :

#contenedor{ 
   margin:0 auto 0 auto; 
   width:750px; 
   height:auto;
   text-align:left;
   border:1px solid #000000;
   background-color:#FFFFFF;
}

#encabezado{
   margin:0 auto 0 auto;
   width:750px;
   height:120px;
   background-image:url(../imagenes/img_Header.jpg);
}

.separador{ 
   margin:0 auto 0 auto; 
   width:750px;
   height:16px; 
   background-image:url(../imagenes/img_DownHeader.jpg);
   font-size:10px;
   color:#FFFFFF; 
}

#contenedor_menu{
   float:left;
   width:195px;
   height:300px;
   border:1px solid #0000FF;

}

#contenedor_contenido{
   float:right;
   width:550px;
   border:1px solid #FF0000;   
   
}


Y mi HTML:

Código :

<html>
<head>
<title>CBTis 139</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css">
</head>

<body>
   <div id="contenedor">
      <div id="encabezado"></div>
      <div class="separador">
         CBTis 139
      </div> 
      <div id="contenedor_menu">
         <p>Menu</p>
      </div>
      <div id="contenedor_contenido">
         <p>Texto</p>
      </div>
      <div class="separador">CBTis 139</div>
   </div>
</body>
</html>


El float me hace lo que dice, osea flota los divs, y no me los encapsula el div principal.

Bueno, espero me puedan ayudar que no se la verdad como arreglarlo :crap:

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 02 Ene 2006 06:59 pm
Eso sucede porque al aplicar floatr al div, este pierde su capacidad de rellenar verticalmente el espacio.

Para solucionarlo, puedes hacer un div "pie" que quede debajo de los dos dovs flotados, y ponerle la propiedad clear:both;. eso hara que el principal se alargue para abarcar al div pie y asi abarcara todo lo que este antes de el.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 02 Ene 2006 10:08 pm
Muchisisisismas gracias ramm :D

Soluciono el problema a la perfección. ^^





.

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 28 Ago 2008 12:17 am
Si ya se que es un post viejo ^^

Pero creo que esta bien que plantee mi duda aqui

Ya he buscado información, pero no encuentro lo que yo quiero, Resulta que yo quiero que IE se comporte como FF, osea que "Pierda su capacidad de rellenar verticalmente".

Por gcm

Claber

557 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador Grafico y Web, Geek

firefox
Citar            
MensajeEscrito el 28 Ago 2008 10:04 am
¿Qué DOCTYPE estás usando?

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 01 Sep 2008 07:19 pm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Por gcm

Claber

557 de clabLevel

3 tutoriales

Genero:Masculino  

Diseñador Grafico y Web, Geek

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.