Foros del Web » Creando para Internet » CSS »

Maquetación 3 columnas con ancho automático

Estas en el tema de Maquetación 3 columnas con ancho automático en el foro de CSS en Foros del Web. [email protected] estoy tratando de crear una página con estructura de 3 columnas donde la columna del medio tiene un ancho fijo y las dos columnas ...
  #1 (permalink)  
Antiguo 26/09/2009, 21:17
Avatar de atoleon  
Fecha de Ingreso: marzo-2007
Mensajes: 156
Antigüedad: 10 años, 9 meses
Puntos: 1
Maquetación 3 columnas con ancho automático

[email protected]

estoy tratando de crear una página con estructura de 3 columnas donde la columna del medio tiene un ancho fijo y las dos columnas laterales tienen un ancho automático.
El problema está en que las columnas laterales no tienen contenido sino una imagen de fondo que se repite en el eje x y cuyo fin es decorativo. Y como no tienen contenido y el ancho es auto pues no crecen a lo ancho y no cumplen su objetivo estético.
Mi pregunta es si existe alguna manera de que las columnas laterales con ancho auto ocupen todo el espacio.

un saludo a todos y gracias una vez más.
  #2 (permalink)  
Antiguo 27/09/2009, 03:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Maquetación 3 columnas con ancho automático

Hola:

Sería mejor que pusieras todo tu código HTML y CSS para poder ayudarte porque sin verlo es difícil.

De todas formas mira si el contenedor de las columnas tiene dimensiones definidas.

Saludos.

  #3 (permalink)  
Antiguo 27/09/2009, 06:48
Avatar de atoleon  
Fecha de Ingreso: marzo-2007
Mensajes: 156
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: Maquetación 3 columnas con ancho automático

esto es el codigo de las 3 columnas:
Código HTML:
<body>

<div id="container">
	<div id="cabecera_i"><!--ESTO ES UN DIV VACIO QUE SOLO SIRVE COMO DECORATIVO--></div>

	<div id="cabecera">
	aqui va la cabecera
	</div>

	<div id="cabecera_d"><!--ESTO ES UN DIV VACIO QUE SOLO SIRVE COMO DECORATIVO--></div>
</div>

</body> 
Este es el archivo de hojas de estilo:

Código:
/*** ESTILO DE LA PÁGINA ***/
body {
	background: #04283b url(../images/fondo.gif) top no-repeat;
}

/*** CLASES PROPIAS ***/
#container {
	width: auto;
}
#cabecera_i {
	width: auto;
	background: red;
	float: left;
}
#cabecera_d {
	width: auto;
	background: red;
	float: right;
}

#cabecera {
	width: 928px;
	height: 227px;
	background: green;
	margin: 0 auto 0 auto;
}
Lo único que quiero es que las columnas laterales ocupen el ancho completo de la pantalla menos lo que ocupe la columna de enmedio. Ahora aparce el fondo con colores pero en realidad será rellenado con imagen de fondo como el típico repeat-x.
El problema está en que como las columnas laterales es que el ancho es automático y como no tienen contenido pues no crecen a lo ancho y no ocupan el espacio para completar la pantalla, sino que me queda una columna cabecera que ocupa su sitio correctamente en el medio y dos columnas a los laterales que no ocupan más que un milimetro de ancho.
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 16:53.