capa fija y otra variable

kaninox · #1 (**permalink**) 16/08/2010, 10:23

Hola muchachos tengo un problema con unas capas lo que necesito son dos capas una al lado de otra para ello pongo un float:left; y me va pero necesito que la capa 1 o primera de la izquierda tenga un ancho fijo, digamos width:300px; siempre y que ademas me ocupe siempre el alto height:100%; pero el height no me funciona, la verdad esto no me quita mucho el sueño lo que quiero saber es como le hago para ponerle otra capa al lado que siempre me ocupe el total faltante :/ puse 100% pero me baja la capa. alguna idea para esto saludos.

jomaruro · #2 (**permalink**) 16/08/2010, 12:32

Hola:

Es un tema bastante hablado en el foro, busca información sobre columnas equilibradas.

Saludos.

kaninox · #3 (**permalink**) 16/08/2010, 13:26

y jomaruro tienes la liga a este tema? por que se a que te refieres pero no es lo que quiero lograr, digo ya logre hacer que el div llegue al 100% en el height agregando

html,body{
height:100%;
}

pero lo que quiero es, una capa fija a la izquierda de 300px por ejemplo y la otra variable no fija.
digamos que esa capa se ajuste a cada resolución. vi esto con lo que me comentas : http://www.forosdelweb.com/f53/aport...bradas-628274/ pero esta trabajado con divs fijos, lo cual no me sirve.

alexk · #4 (**permalink**) 16/08/2010, 14:58

no entiendo tu problema es con altura o con el ancho y de que capa?... :S
es decir, si quieres que las columnas esten a la misma altura el link anterior te debe servir...

deirdre · #5 (**permalink**) 16/08/2010, 21:51

Hola kaninox

Sin llegar a entenderte del todo bien, mira si es esto lo que necesitas:

Código HTML:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Estudio de caja fija y caja que ocupa el resto</title>
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
}
.caja300 {
	position: absolute;
	top: 0;
	left:0;
	width: 300px;
	height: 100%;
	background-color: #ff9;
}
.otracaja {
	position: relative;
	top: 0;
	margin-left: 300px;
	display: block;
	height: 100%;
	background-color: #ccc;
}
</style>
</head>

<body>
<div class="caja300">Caja de 300 px de ancho y 100% de altura</div>

<div class=" otracaja">Esta otra caja ocupa el resto de la pantalla, independientemente de la resolución del monitor.</div>

</body>

</html>

Saludos

jomaruro · #6 (**permalink**) 17/08/2010, 11:47

Hola:

Cita:

Iniciado por deirdre

Sin llegar a entenderte del todo bien, mira si es esto lo que necesitas:

Por lo que yo he entendido después de la última explicación eso es lo que necesita.

Saludos.

deirdre · #7 (**permalink**) 17/08/2010, 16:56

Hola jomaruro

Puede que sí. Yo también creo que es lo que buscaba. Esperemos un poco, a ver si nos lo aclara.

Saludos

kaninox · #8 (**permalink**) 19/08/2010, 08:05

si es justo lo que necesitaba, de verdad no se me entendió bien? :(
bueno muchas gracias deirdre tu si me entendiste o le achuntaste jajaja

saludos

alexk · #9 (**permalink**) 19/08/2010, 08:18

Cita:

Iniciado por kaninox

si es justo lo que necesitaba, de verdad no se me entendió bien? :(

pues no jaja...

deirdre creo que hiso contacto con seres misticos del mas alla

, pero bueno que bueno que este solucionado

kaninox · #10 (**permalink**) 19/08/2010, 08:22

pues el único problema es que si abro la web en una resolución X funciona muy bien pero si tengo scroll en la pagina se pierde el color, de las capas

digo si comienzo a bajar se pierde el color, en el ejemplo que me diste por ejemplo a la capa izquierda agregale varios <br /> hasta que genere scroll y baja, el color queda hasta donde la web se cargo primeramente.
bueno esta es la capa que me interesa ya que la necesito con color de fondo la de la derecha no me interesa coloreada, y pues como se haria para que el color siempre se mantenga, lo malo es que en esta capa izquierda tengo un menu desplegable como este : http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

y al hacer click crece y el color se pierde :(

PD: Olvidenlo se me ocurrio poner una imagen de como con fixed en el html, body y me va

Código CSS:

Ver originalbackground: #FFFFFF url(fondo.jpg);
 background-repeat: repeat-y;
 background-attachment: fixed;

saludos.

deirdre · #11 (**permalink**) 19/08/2010, 17:42

Hola kninox

Me alegra que te sirviera y que, con los ajustes que mencionas, lo hayas podido adaptar a tu diseño.

Hola alexk

El contacto con los seres místicos se me da mucho mejor con un par de cervecitas en el cuerpo: Invito a una ronda!... a por el misticismo en el diseño web!

Saludos