Foros del Web - Ver Mensaje Individual

Mikmoro · #3 (**permalink**) 25/03/2008, 13:23

Mira: una forma práctica de conseguir que tu caja izquierda para un menú (por ejemplo), crezca cuando crece el contenido de una caja central, es no hacer esa caja del menú, sino hacer la caja del contenido con un borde izquierdo igual a lo que mediría tu caja de menú (p.e. 200px). Así, cuando el contenido crece, la caja simulada de la izquierda también lo hace.
Y si es un borde, ¿cómo se coloca algo ahí? pues con un margen negativo, es decir, com por ejemplo margn-left: -185px; de manera que el texto quede sobre el borde izquierdo como si realmente fuera una caja.

Por si no ha quedado claro, copia y pega este código y verás qué curioso: conforme crezca el contenido de la caja central, la de la izquierda también lo hará.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title>Truco Borde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* { margin: 0px;
padding: 0px;
}
#contenedor { border-left: 200px solid rgb(0, 102, 0);
background-color: rgb(51, 153, 153);
}
.texto_izq { margin-left: -185px;
float: left;
width: 185px;
margin-top: 20px;
}
#centro { margin-left: 20px;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="contenedor"><span class="texto_izq">Texto
que quedará en la caja de la izquierda</span>
<div id="centro">
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<p>Texto que quedará en la parte
central del contenido</p>
<br>
<br>
</div>
</div>
</body>
</html>

Mikel.