Foros del Web » Creando para Internet » CSS »

Problema con capas flotantes

Estas en el tema de Problema con capas flotantes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/05/2006, 05:11
 
Fecha de Ingreso: septiembre-2005
Mensajes: 70
Antigüedad: 12 años, 2 meses
Puntos: 0
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
  #2 (permalink)  
Antiguo 17/05/2006, 08:53
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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;
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 17/05/2006, 08:55
 
Fecha de Ingreso: septiembre-2005
Mensajes: 70
Antigüedad: 12 años, 2 meses
Puntos: 0
gracias!! es lo malo de estar mal acostumbrado con IE... ya funciona.
  #4 (permalink)  
Antiguo 17/05/2006, 09:07
 
Fecha de Ingreso: septiembre-2005
Mensajes: 70
Antigüedad: 12 años, 2 meses
Puntos: 0
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?
  #5 (permalink)  
Antiguo 17/05/2006, 09:40
 
Fecha de Ingreso: septiembre-2005
Mensajes: 70
Antigüedad: 12 años, 2 meses
Puntos: 0
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.
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 19:07.