dilema con layout

Matahari · #1 (**permalink**) 07/04/2008, 17:44

hola amig@s,

tengo el diseño de una web, pero no se como realizarlo porque es un poco complicado (para mi) y todo lo que he probado no me funciona.

El diseño es sencillo:
se trata de un div contenedor con dos divs dentro, uno de ancho fijo que va enganchado siempre a la derecha (caja02), y el otro, tb de ancho fijo, va centrado en el espacio sobrante de la izquierda (caja01).

Pues no se como hacer que el de la izquierda (caja01) se centre en el espacio sobrante, he probado flotando la caja02 a la derecha para que siempre este enganchada a la derecha, pero no se como continuar para centrar la caja01 en el espacio sobrante de la izquierda... estoy liadisima, como puedo hacer realidad este diseño?? es bien sencilla la idea, pero no consigo trasladarlo al css

creo que tanto rato dandole vueltas me esta volviendo loca...

muchas gracias!

Mikmoro · #2 (**permalink**) 07/04/2008, 17:50

Hola, Matahari (buen nick, da un poco de miedo contestar

)

¿Por qué no pones lo que tienes ahora de html y css para ver cuál podría ser la solución? Es que tal caja de un ancho fijo, la otra también... sin ver las medidas es un poco complicado.

Mikel.

Matahari · #3 (**permalink**) 08/04/2008, 02:21

hola,

no puedo poner lo que tengo porque es demasiado complicado, pero os pongo un ejemplo:

Código:

<!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>Untitled Document</title>
<style type="text/css">
<!--

#caja01 {
	height: 100px;
	width: 250px;
}

#caja02 {
	height: 500px;
	width: 600px;
}
-->
</style>
</head>

<body>

<div id="container">
<div id="caja01">
</div>
<div id="caja02">
</div>
</div>

</body>
</html>

El tema es que quisiera que la caja02 estuviese siempre pegada a la derecha, y la caja01 estuviese centrada en el espacio sobrante de la izquierda.

Gracias por la ayuda,
pero no encuentro un sistema por mi sola.

Gracias!!!

PD: se puede con javascript o css3 p.e. "width: 100% - 600px" ?? Gracias!!

Mikmoro · #4 (**permalink**) 08/04/2008, 02:24

¿Y qué tamaño tiene "container"? ¿será fluido? ¿porcentaje? ¿exacto?
Porque ahí radica la cuestión.

Mikel.

Matahari · #5 (**permalink**) 08/04/2008, 02:28

pues en principio habia puesto 100%

Mikmoro · #6 (**permalink**) 08/04/2008, 02:38

Vale, pues entonces podrías usar este código, que se basa en que la caja derecha está flotada a la derecha, la de la izquierda sin flotar, y el centrado lo marcas con los márgenes:

Cita:

<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#caja01 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 100px;
background-color: rgb(51, 153, 153);
margin-right: 210px;
margin-left: 4px;
}

#caja02 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 500px;
background-color: rgb(51, 102, 102);
float: right;
width: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="caja02"></div>
<div id="caja01"></div>
</div>
</body>
</html>

Te he puesto bordes para que lo veas claramente. Recuerda que si los quitas, las cantidades de margen hay que retocarlas.

Espero que te sirva para adaptarlo a tu caso.

Mikel.

Matahari · #7 (**permalink**) 08/04/2008, 02:42

voy a probarlo en mi caso,

muchas gracias mikel!!

Matahari · #8 (**permalink**) 08/04/2008, 02:52

pues no me funciona del todo bien. He introducido una subcaja dentro de caja01, y he intentado centrarla mediante margin auto, pero no me funciona, dejo el codigo con la subcaja sin posicionar, como lo harias?

Código:

<!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" lang="es-es">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* { margin: 0px;
padding: 0px;
}

#container {
min-width: 900px;
}

#caja01 {
	border-style: solid;
	border-color: rgb(255, 102, 0);
	height: 100px;
	background-color: rgb(51, 153, 153);
	margin-right: 210px;
	margin-left: 4px;
}

#caja02 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 500px;
background-color: rgb(51, 102, 102);
float: right;
width: 600px;
}
#subcaja01 {
	background-color: #99FF33;
	width: 250px;
	height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="caja02"></div>
<div id="caja01">
<div id="subcaja01">caja que quiero centrar dentro de la caja01</div>
</div>
</div>
</body>
</html>

Mikmoro · #9 (**permalink**) 08/04/2008, 03:07

Supongo que has visto por qué hay que ser más específico/a en las consultas: una cosa es centrar la caja y otra centrar las cosas dentro de la caja.

Le echo un vistazo a ver si se me ocurre algo.

Mikel.

Matahari · #10 (**permalink**) 08/04/2008, 03:11

tienes razon, pero le he metido la subcaja porque he visto que tu le habias quitado el ancho a la caja01 para que ocupara el espacio restante. Entonces ahora la question es centrar esa subcaja dentro de la caja01.

Gracias por las molestias mikel!

Mikmoro · #11 (**permalink**) 08/04/2008, 03:13

La cosa es que no has retocado las medidas que te he dado para adaptarlas a tu ejemplo

.

Si tu caja derecha mide 600px de ancho, entonces el margin-right de la caja 01 debe ser de 610px.
de esa manera, si pones a la subcaja margin: 0px auto; se centra automáticamente.

Cita:

#caja01 {
border-style: solid;
border-color: rgb(255, 102, 0);
height: 100px;
background-color: rgb(51, 153, 153);
margin-right: 610px;
margin-left: 4px;
}

#caja02 { border-style: solid;
border-color: rgb(255, 102, 0);
height: 500px;
background-color: rgb(51, 102, 102);
float: right;
width: 600px;
}
#subcaja01 {
background-color: #99FF33;
width: 250px;
height: 50px;
margin: 0px auto;
}

Mikel.

Matahari · #12 (**permalink**) 08/04/2008, 03:20

Muchas gracias Mikel,
Te lo agradezco muchisimo!!

ahora me lo mirare detalladamente, es verdad que antes he canviado anchos sin cuidado, disculpas por eso.

Gracias!!

Mikmoro · #13 (**permalink**) 08/04/2008, 03:26

De nada, es un placer.

Seguro que de esta forma te funcionará. Otra cosa es lo que vayas a hacer después. Ya contarás. Si necesitas ayuda consulta.

Mikel.