Auto agrandado de div en función de otro div

Samie · #1 (**permalink**) 10/04/2010, 03:55

Buenas!
Estoy empezando a diseñar una página personal. Como no domino css, lo que hice fue descargarme una plantilla con las típicas secciones (cabecera, 3 columnas y pie) para personalizarlas.

Para las columnas laterales he diseñado un fondo que resulte "curioso".

Entonces ahora lo que estoy tratando es de poner una imágen de fondo en cada columna, de forma que quedecon un diseño curioso.
Aunque no está ni empezada, la he subido para que podais ver la estructura

[URL="http://a.hostzi.com/"]http://a.hostzi.com/[/URL]

Como pongo en la página, lo que trato de conseguir es que la columna de la página se agrande (con su imagen de fondo) para que cubra el alto de la columna central.

Decir que el fondo de la columna está constituido en realidad por tres imágenes (margen izquierdo y superior, derecho y la parte de abajo)

Agradecería cualquier ayuda.
Muchas gracias!

Adjunto el codigo css y html

HTML:

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>
<link type="text/css" href="1-3col.css" rel="stylesheet" media="screen" />
<title>No.1 :: CSS Template :: XTML 1.0 Transitional</title>
<link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
	<div id="banner" >
	  <div align="left">
	    <h2><a href="http://www.intensivstation.ch">LOGO</a> </h2>
	  </div>
	  <h1 align="left">Inicio</h1>
  </div>
	<div id="left">
		<h3>&nbsp;</h3>  
	  <div class="ArticleBody">AquÃ* va el menÃº </div>		
		<div class="ArticleFooter"> 
		<p>&nbsp;</p>
		
		</div>
				
  </div>
  

<div id="right">
		<h2>&nbsp;</h2>
		
  </div>	
	<div id="content">
	  <p>El Contenido va aquÃ*</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>pongo &lt;br / &gt; de prueba</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>y mÃ¡s</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>&nbsp;</p>
	  <p>el Ãºltimo <br /> La idea seria que la columna que tengo a la izquierda (y otra mas que va a la derecha) se auto agrandara ajustandose al largo de esta
 para que no quedaran desiguales  </p>
	</div>
 	<div id="footer"><h1>&nbsp;</h1>
 	</div>
</div>
</body>
</html>

CSS:

Código CSS:

Ver original/* *** css by miss monorom www.intensivstation.ch *** */
/* css released under Creative Commons License -  http://creativecommons.org/licenses/by/2.0/deed.en  */
 
body {
background-color: #e1ddd9;
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#564b47;
padding:0;
margin:0;
}
a {color: #DB7093;}
a:visited {color:#DB7093;}
a:hover {color: #564b47;}
a:active { color:#000000;}
 
h1 {
font-size: 11px;
background-color: #FFFFFF;
border-top:1px solid #564b47;
border-bottom:1px solid #564b47;
padding:5px 15px;
margin:0 }
 
h2 {
font-size:20px;
font-weight: normal;
padding: 5px 10px;
margin:0;}
 
img.download {vertical-align:middle;}
 
/* ----------container to center the layout-------------- */
#container {
    width: 750px;
    margin-bottom: 0;
    background-color: #FFFF99;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
}
 
/* ----------banner for logo-------------- */
#banner {
background-color: #FFFF99;
text-align: right;
padding: 0px;
margin: 0px;
}
#banner img {padding:10px 0px;} 
 
/* -----------------content--------------------- */
#content {
background-color: #ffffff;
padding: 0px;
margin: 0 185px 0 180px;
}
div#content { 
min-height:485px;
height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
}
 
p, pre{
padding: 5px 10px;
margin:0px;
}
 
/* --------------left navi------------- */
#left {
background: url(imagenes/custom_corners_topleftG2.gif) top left no-repeat;
float: left;
width: 180px;
margin: 0;
padding: 0;
}
 
#left h3 {
background: url(imagenes/custom_corners_topright2.gif) top right no-repeat;
padding:15px;
 
margin:0 0 0 140px;
font-size:1.2em;
width:auto;
 
}
div.ArticleBody {
  background: url(imagenes/custom_corners_rightborder.gif) top right repeat-y;
  padding:15px;
  margin-top:-3.8em;
  margin-left:0em;
  width:auto;
 /*La magia de este diseño está aquí, esta propiedad hace que no bailen las secciones como ocurria antes */ 
  height:430px;
  }
 
#right {
float: right;
width: 40px;
margin: 0 100px;
padding: 0;
}
 
 
  
div.ArticleFooter {
  background: url(imagenes/custom_corners_bottomleft2.gif) bottom left no-repeat;
  width:auto;
  }
  
div.ArticleFooter p {
  background: url(imagenes/custom_corners_bottomright2.gif) bottom right no-repeat;
  padding:15px;
  margin:-2em 0 0 0;
  width:auto;
  }
 
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0;
padding: 0;
text-align: right; 
}