Ancho de capas ajustable al ancho de otra

mariano_donati · #1 (**permalink**) 04/01/2009, 20:21

Hola a todos. Espero poder expresarme bien. Tengo dos capas, llamemosle capa_1 y capa_2, con float: left y float: right respectivamente. Estas capas están ubicadas en una capa que las contiene, con un ancho determinado, supongamos 200px. Entonces, quiero que si capa_1 tiene de ancho 40px (de acuerdo al texto que esté escrito en esta) capa_2 tenga 160px de ancho. Pero si a capa_1 ahora se le introduce un texto más largo, y el ancho de capa_1 es ahora de 100px, entonces quiero que capa_2 tenga un ancho de 100px también.
Eso es todo.
Saludos.

Mikmoro · #2 (**permalink**) 05/01/2009, 00:48

Pon primero la caja de la derecha y quita el float a la de la izquierda:

Ejemplo:

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
* {margin: 0;padding:0;}
#derecha, #izda {height: 600px;}
#derecha {float: right; background-color: #00f;}
#izda {background-color: #f0f;}
</style>
</head>
<body>
<div id="derecha">Una prueba de contenido</div>
<div id="izda"></div>
</body>
</html>

mariano_donati · #3 (**permalink**) 05/01/2009, 05:24

El efecto que quería lograr era el contrario, pero tu código me ayudo a darme cuenta de como lograrlo. Puse la capa de la izquierda a la izquierda, y deje su atributo float: left; y a la capa de la derecha le borre el atributo float: right y listo. Gracias por tu respuesta!.

Mikmoro · #4 (**permalink**) 05/01/2009, 06:26

Ah, vale, lo había entendido al revés, pero efectivamente, era lo mismo.