Peginas proporcionales al ancho de la pagina

micayael · #1 (**permalink**) 24/01/2008, 12:26

Hola Amigos.

EStoy tratando de hacer una página con css pero se me presenta un problema que antes con una tabla lo solucionaba rapidamente y ahora estoy un poco parado.

Supongamos que tenga una tabla de 3 columnas por dos filas asi como intento dibujarlo abajo (los puntos son espacios en blanco)

+----------------------------------------+
|................................................. ................................|
|................................................. ................................|
+----------------------------------------+
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
|..................|.............................. ...................|............|
+----------------------------------------+

la idea es que en la segunda fila, la primera y tercera columna tengan anchos fijos y la del centro un ancho proporcional. De esta manera no dependo de la resolucion del monitor porque la pagina siempre estará llegando a los dos extremos de la pagina. Entonces por un lado no estoy sabiendo hacer que sean todos DIVs y que tenga esta misma funcionalidad. Por otro lado esta el alto. Dependiendo de la información cargada en el DIV del medio, la primera y tercera columna deberian de ir hacia abajo manteniendose alineadas al extremo inferior de la segunda columna.

Se entiende?

Es posible hacerlo con CSS?

hades87 · #2 (**permalink**) 24/01/2008, 18:21

mira a ver si esto te sirve:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<style type="text/css">
#contenedor{
width: 80%;
height: auto;
border: 1px solid #000;
margin: auto;
}

#columna1{
float: left;
width: 25%;
height: 600px;
border: 1px solid #000;
}

#columna2{
width: 20%;
height: 600px;
width: auto;
border: 1px solid #000;
}

#columna3{
float: right;
width: 25%;
height: 600px;
border: 1px solid #000;
}
</style>

<body>
<div id="contenedor">
<div id="columna1">aaa</div>
<div id="columna3">ccc</div>
<div id="columna2">bbb</div>
</div>
</body>
</html>

micayael · #3 (**permalink**) 25/01/2008, 08:48

Hola hades87. Gracias por la respuesta.

Lo estuve mirando pero al empezar a darle más contenido a la columna del medio por ejemplo agregando mas texto llega un momento en que los limites inferiores de las columnas 1 y 3 quedan y el texto continua para abajo en una forma medio rara. justamente lo que necesito es que parezca que todo continua. y por otro lado no abarca toda la ventana en forma horizontal (el 100% de la ventana)

Si pones en la columna2 este contenido te darás cuenta

<div id="columna2">
<p>bbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf asbbsbs fasd fasdf asdf as</p>
</div>

micayael · #4 (**permalink**) 25/01/2008, 09:04

Esto es lo que necesitaría en CSS para no usar tablas.

-Si se fijan la tabla en si tiene 100% de ancho lo que hace que vaya de extremo a extremo horizontal.
-La primera y tercera columna tiene con ancho de la celda 200px lo que hace que nunca cambien de tamaño.
-La columna del medio no tiene un ancho especificado por lo que es ajustable
-La tabla tiene como alto 400px que lo tomo como el mínimo. Si escribimos mucho texto en la celda del medio irá llando para abajo y obligando a las columnas 1y 3 ir también hacia abajo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>
<table width="100%" height="400" border="1">
<tr>
<td colspan="3" align="left" valign="top">cabecera</td>
</tr>
<tr>
<td width="200" align="left" valign="top">menu</td>
<td align="left" valign="top"><p>parte del layout que ira cambiando de acuerdo a la información </p>
<p> </p>
<p> </p>
<p> </p></td>
<td width="250" align="left" valign="top">Esto estaría reservado para mensajes a los usuarios </td>
</tr>
<tr>
<td colspan="3" align="left" valign="top">pie de pagina</td>
</tr>
</table>
</body>
</html>

hades87 · #5 (**permalink**) 25/01/2008, 09:28

yo te aconsejo que tomes como referencia lo que te dí y mírate algún tutorial de css, para saber propiedades y todo eso y así manejar lo a tu gusto :D

micayael · #6 (**permalink**) 25/01/2008, 10:11

Ya conozco CSS amigo hades87 pero este problema no estoy pudiendo resolverlo. Ya intente mucho con las propiedades de los DIVs por eso recurri al foro.

CSS ayuda mucho para mantener limpia la pagina ya que no estoy metiendo TABLE por todos los lados y por eso quisiera estructurarlo con DIVs

Si alguien tiene alguna manera de como hacer esto agradecería mucho el aporte.

Saludos

elbecerro · #7 (**permalink**) 25/01/2008, 12:02

El tema de las columnas con la misma altura en css alcanza ya el caracter de clásico.

Te envio este enlace: www.ejeliot.com/blog/61 (inglés)

Tienes varias propuestas de solución.

Tambien googleando un poco: "columnas misma altura css" encontrarás cosas en español, si las lenguas no son lo tuyo.

Espero que te sirva :)

micayael · #8 (**permalink**) 26/01/2008, 08:51

Gracias amigo. ahora mismo me pongo a verlo.

Si alguien tiene alguna sugerencia con repecto a la otra parte de la consulta estaría muy agradecido. Es con relación a que abarque todo el ancho de la pagina asi como el ejemplo con TABLE que deje.

Muchas gracias

hades87 · #9 (**permalink**) 27/01/2008, 03:18

al contenedor ponle width: 100%

truxo74 · #10 (**permalink**) 27/01/2008, 04:17

Hola,
Espero que te sirba, a mi para practicar un poquillo me a valido :) aunque seguro que hay muchas formas y/o mejores :P

Saludos

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#columnaArriba {
	border: 1px solid black;
}
#contenedor {
	float: left;
	width: 81%;
	border: 2px solid yellow;
}
#columnLeft {
	float: left;
	width: 20%;
	border: 1px solid red;
}
#mainContent {
	float: left;
	width: 79%;
	border: 1px solid green;
}
#columnRight {
	width: 18%;
	/* Lo floto a la derecha para hacerlo coincidir
	 * con el borde derecho de arriba, si no, tambien
	 * se puede en left
	 */
	float: right;
	border: 1px solid blue;
}
#otra {
	clear: both;
}
</style>
</head>
<body>
<div id="columnaArriba">
	<h2>Columna de Arriba</h2>
</div><!-- Fin columnaArriba -->

<div id="contenedor">
	<div id="columnLeft">
		<h4>Columna Izquierda</h4>
	</div><!-- Fin columnLeft -->
	<div id="mainContent">
		<h4>Columna Central</h4>
	</div><!-- Fin mainContent -->
</div><!-- Fin de contenedor -->
<div id="columnRight">
	<h4>Columna derecha</h4>
</div><!-- Fin de columnRight -->
</body>
</html>

micayael · #11 (**permalink**) 05/02/2008, 12:40

Muchas gracias Truxo74