Foros del web, para los que viven de bits

Abite · 17-may-2006, 04:11

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

kemie · 17-may-2006, 07:53

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;

Abite · 17-may-2006, 07:55

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

Abite · 17-may-2006, 08:07

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?

Abite · 17-may-2006, 08:40

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.

17-may-2006, 04:11	#1 (permalink)
Abite Fecha de Ingreso: septiembre-2005 Mensajes: 72	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

17-may-2006, 07:53	#2 (permalink)
kemie Fecha de Ingreso: junio-2003 Ubicación: estocolmo<-->mexico Mensajes: 1.627	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::::::::::::::::::::::::::::::

17-may-2006, 08:07	#4 (permalink)
Abite Fecha de Ingreso: septiembre-2005 Mensajes: 72	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?

17-may-2006, 08:40	#5 (permalink)
Abite Fecha de Ingreso: septiembre-2005 Mensajes: 72	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.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

17-may-2006, 07:55	#3 (permalink)
Abite Fecha de Ingreso: septiembre-2005 Mensajes: 72	gracias!! es lo malo de estar mal acostumbrado con IE... ya funciona.