¿Esto es imposible con DIVs?

Computer XTress · #1 (**permalink**) 20/08/2008, 05:29

Hola que tal gente!!

Estoy volviendome loco intentado hacer con divs algo que con tablas es realmente simple... voy directo al grano, aqui va el HTML:

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" xml:lang="en" lang="en">
<head>
	<title>test</title>
	<style type='text/css'>
		BODY, HTML {
			height: 100%;
			width: 100%;
			margin:0;
			padding:0;
		}
	</style>

</head>
<body>

	<table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0' style='background-color:gray;'>
		<tr>
			<td style='background-color:yellow;'>&nbsp;</td>

			<td width='700' height='100%'  style='background-color:red;'>
				<div style='width:500px; height: 500px; background-color: maroon; margin:auto;'>hola</div>
			</td>

			<td style='background-color:blue;'>&nbsp;</td>
		</tr>
	</table>

</body>
</html>

Es simple... tengo un centro de ancho FIJO en donde van los contenidos y dos barras laterales cuyo ancho debería ajustarse automaticamente al ancho total de la ventana. Cada uno de los cells aquí tendrá su imagen de fondo: El centro tendrá una imagen específica y los dos cells que se ajustan automaticamente tendrán un patrón repetitivo (una imagen de 1 px repetida). CADA una de las dos franjas laterales IZQ y DER van a tener una imagen diferente (por eso no estoy obligado a usar 2 contenedores).

La verdad ya no se como rayos hacer... tengo bastante experiencia maquetando con divs, lo vengo haciendo hace mucho y resolvi muchos problemas pero este me dejó por lejos sin más qué probar...

Con divs, cree 3 divs flotadas, mi primer aproach fue hacer un diseño liquido pero falló por que siempre a las divs laterales les tengo que definir un WIDTH exacto ya sea en PIXELS o PORCENTAJE...

¿Se podrá indicar a una div que se expanda tanto como le sea posible de forma automática y sin relación a su contenido, tal como lo hacen los TD de una tabla con width 100%?

MUCHAS GRACIAS GENTE !!!!!!!! Si me pueden dar una mano les voy a estar muy agradecido :)

Drizzle · #2 (**permalink**) 20/08/2008, 14:59

A ver veamos. Si a un div, le defines un ¨width¨o ancho este se queda fijo.
Si no le añades un width, lo haces líquido.
No entiendo mucho tu cuestión, realmente, si podrías explicarte mejor.
Yo crearía unos divs flotantes con posiciones absolutas y creo que eso funcionaría bien.

Mikmoro · #3 (**permalink**) 20/08/2008, 15:58

Prueba con esto:

Cita:

<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type='text/css'>
html, body {height: 100%;
width: 100%;
margin:0;
padding:0;
background-color:yellow;
}
#azul {background-color:blue;height: 100%;width: 600px;position: absolute;right: 0;top: 0;}
#rojo {background-color:red;width: 700px;height: 100%;margin: 0 auto;position: relative;}
#marron {background-color: maroon;width:500px; height: 500px; margin:auto;position: relative;top: 40px;}
</style>
</head>
<body>
<div id="azul"></div>
<div id="rojo">
<div id="marron">Hola</div>
</div>
</body>
</html>

Computer XTress · #4 (**permalink**) 27/08/2008, 08:53

Eso parece funcionar... gracias por tu respuesta !