Usando Float en Firefox me lo saca del contenedor principal

[bincito]

Hola. Me gustaria que me ayudaran ya que mi experiencia con maquetacion CSS es escasa. Algo tan simple como poner dos columnas me da un problema en firefox.

PARTE IMPORTANTE DEL CSS:

Código:

#borde{
border: 4px ridge #FFCC33;
text-align: center;
background-color: #DCDAA7;
width: 770px;
margin: auto;
} 

#contenedor{
width: 755px;
margin: auto;
margin-top: 7.5px;
margin-bottom: 7.5px;
background-color : transparent;
} 



#cuerpo{
width: 755px;
border: 0px;
}

#cuerpo_izq{
width:370px;
border: 2px inset #FFCC33;
margin-top: 10px;
background-color :  #DCDAA7;
float: left;
}

#cuerpo_der{
width:370px;
border: 2px inset #FFCC33;
margin-top: 10px;
background-color : #DCDAA7;
float:right;
}

PARTE IMPORTANTE DEL XHTML:

Código HTML:

<div id="borde">
  <div id="contenedor">
    <div id="cabecera"><img src="IMAGENQUESEA.GIF" width="755" height="125" alt="BLABLA">
      <div id="barra">
        MENUCUALQUIERA
      </div>

    </div> 
 
    <div id="cuerpo">
      <div id="cuerpo_izq">
        <p>hola</p>
      </div>
      <div id="cuerpo_der">
        <p>hola</p>
      </div>
    </div>
  </div> 
</div> 

Pues bien. En el explorer no hay problema, pero en firefox me saca las columnas "cuerpo_izq" y "cuerpo_der" de contenedor. Se quedan fuera del marco general. Si quito el float de "cuerpo_izq" y "cuerpo_der" se queda dentro pero claro, no queda dnd yo quiero.

Supongo que este problema alguien con experiencia o tiene mas que superado.

SALUDOS Y GRACIAS...

[willyfc]

aumenta esto en ese bloque:

Código:

#cuerpo{
width: 755px;
border: 0px;
height:auto;
overflow:auto;
}

[jomaruro]

Hola:

Tambien puedes añadir esto:

En el CSS:

Código:

#reset{
clear:both;
}

y en el HTML:

Código:

                <div id="cuerpo">
                    <div id="cuerpo_izq">
                        <p>hola</p>
                    </div>
                    <div id="cuerpo_der">
                        <p>hola</p>
                    </div>
                    <div style="clear:both;"></div>
                </div>

Saludos.

[willyfc]

si si, se me olvidó eso, pero si asumimos que va tener un pie lo mejor sería darle el clear:both al contenedor del pie, de esa manera evitamos el div vacio

[jomaruro]

Hola:

Bien, esa solución se me olvidó a mí, ya estamos empatados a olvidos

Saludos.

[bincito]

Solucionado. GRACIAS

[cubic]

Y tengo el sieguiente problema con Internet explorer ien pero con Firefox la capa principal Web se hace más grande del 10% de la pantalla deformando la web hacia abajo y dejando un espacio mínimo para el pie un espacio en blanco entre contenido y pie:

HTML:

Código HTML:

<div id="web">
    <div id="menu">
       AAAA
    </div>
    <div id ="content">
       BBB
    </div>
    <div id="foot">
        CCC
    </div>
</div> 

CSS:

Código:

#web {
	display: table;
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
#header {
	height: auto;
	width: 100%;
	overflow: auto;
}
#menu {
	float: left;
	height: 75%;
	width: 20%;
	overflow: auto;
	background-color: #C0C0C0;
}
#content {
	float: right;
	height: 75%;
	width: 80%;
	overflow: auto;
}
#foot {
	clear: both;
	height: auto;
	width: 100%;
	overflow: auto;
	border-top: 10px;
	border-top-color: #009999;
	border-top-style: solid;
}