Foros del Web - Problema con capas flotantes

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Problema con capas flotantes (http://www.forosdelweb.com/f53/problema-con-capas-flotantes-394344/)

Problema con capas flotantes

Hola,
estoy intentando crear un web sin utilizar tablas y para ello estoy usando CSS, pero se me plentea un problema. Primero os explico el codigo:

Código:

#content{

display:block;

position: relative;

width:800px;

height:100%;

margin: auto;

border-left:1px solid #DED9B4;

border-right:1px solid #DED9B4;

padding:0px 6px 0px 6px;

background-color: #FFFFFF;

}
 

#ColumnaIzquierda{

margin:auto;

float:left;

width:150px;

background-color:#FFFFFF; 

}
 

#ColumnaCentro{

margin-left: 14px;

float: left;

width: 500px;

background-color:#FFFFFF; 

}
 

#ColumnaDerecha{

margin:auto;

float: right;

width:120px;

background-color:#EFEFEF; 

}

La capa #content genera el contenedor donde se alojan las tres columnas, el problema lo tengo con firefox que no me admite el alto 100% que le asigno, y como veis en el codigo le asigno a #content un color de fondo blanco para que envuelva a las 3 columnas, y lo que hace es mostrar las columnas fuera de la capa #content.

El codigo html es:

Código:

        <div id="content">

                <div id="ColumnaIzquierda">

                        contendio izquierdo

                </div>

                <div id="ColumnaCentro">

                        contendio centro

                </div>

                <div id="ColumnaDerecha">

                        contendio derecha

                </div>

        </div>

Espero que alguien pueda ayudarme a que las tres columnas salgan dentro del #content por lo menos en el parametro height.

Un saludo

Abite, lo que hace firefox es lo normal. cuando flotas una capa, la sacas del flujo del documento, por lo que no ocupa espacio, es por esto que #content esta vacío y no contiene las capas flotantes. Una forma de forzarlo a que las contenga es dandole la propiedad overflow:auto;

gracias!! es lo malo de estar mal acostumbrado con IE... ya funciona.

Bueno, me parece que he cantado victoria antes de tiempo, ahora en firefox se me ve perfecto, pero en IE me sale la barra de desplazamiento para la capa que le he dado la propiedad de overflow:auto.

El codigo queda ahora sí:

Código:

#content{

overflow: auto;

margin: auto;

width:800px;

height:100%;

border-left:1px solid #DED9B4;

border-right:1px solid #DED9B4;

padding:0px 6px 0px 6px;

background-color: #FFFFFF;

}

¿Alguna idea de como hacer que lo que sale en firefox se vea correctamente en IE?

Bueno, por si a alguien le sirve, lo he conseguido engañando un poco:

Código:

#content{

display:block;

overflow: auto;

_overflow: none; <-- En teoria esto solo lo lee IE

margin: auto;

width:800px;

height:100%;

border-left:1px solid #DED9B4;

border-right:1px solid #DED9B4;

padding:0px 6px 0px 6px;

background-color: #FFFFFF;

}

De todas formas si se puede hacer de otra forma mas seria... espero vuestros comentarios.