Foros del Web - Ver Mensaje Individual

SiKuSS · #1 (**permalink**) 19/12/2011, 06:33

Muy buenas a todos!

Estoy creando una página web dinámica, es decir, tengo que pensar en dejar montada la web de manera que puedan ir añadiendo información y que la página vaya creciendo de forma correcta.

Entonces he distribuido la web en 3 divs, zona izquierda de text, zona central de información y la derecha para los banners.

Hasta aquí bien, el problema viene a que cuando intento añadir más textos o imágenes, el fondo no es capaz de crecer. He intentado darle un "height:auto" pero no ha servido de nada, y no se hacia donde tirar....

Misteriosamente el div central funciona correctamente, a medida que le meto más imagenes el fondo de la pantalla se estira verticalmente, pero con los 2 divs laterales, no son capaces de hacerlo y no se porque...

Os dejo 3 capturas:

1 - Estructura normal, todo colocado correctamente

http://www.imagebam.com/image/c43af8165297846

2 - Si añado imágenes al div central la página crece correctamente

http://www.imagebam.com/image/9b9d1d165297855

3 - Y aquí es donde falla, los divs laterales crecen pero el fondo no hay manera de que se estire...

http://www.imagebam.com/image/60f214165297863

Y estos los ficheros HTML y CSS

index.html

Código HTML:

<body style="background-color: #5f6568">

<div id="divTotal" style="margin:10px auto;">


	<div align="center">
		<img src="img/foto.jpg" style="margin-top:30px;padding-bottom:20px;">
	</div> 




	<div id="smoothmenu1" class="ddsmoothmenu">
	<ul>



	<li><a href="#">&nbsp Inici &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a></li>

	<li><a href="#">&nbsp L'escola &nbsp&nbsp&nbsp&nbsp</a>
	  <ul>
	  <li><a href="#">EOI</a></li>
	  <li><a href="#">FAQ</a></li>
	  <li><a href="#">Horari</a></li>

	  </ul>
	</li>
	<li><a href="#">&nbsp Preinscripcio &nbsp&nbsp&nbsp&nbsp</a>
	  <ul>
	  <li><a href="#">Cursos anuals</a></li>
	  <li><a href="#">Cursos semestrals</a></li>
	  <li><a href="#">Cursos ordinaris</a></li>
	  </ul>
	</li>
	<li><a href="#">&nbsp&nbsp Galeria &nbsp&nbsp&nbsp&nbsp</a></li>
	<li><a href="#">&nbsp&nbsp Calendari&nbsp&nbsp</a></li>
	<li><a href="#">&nbsp&nbsp Gestions alumnat &nbsp&nbsp</a></li>
	<li><a href="#">&nbsp&nbsp Premsa &nbsp&nbsp</a></li>
	<li><a href="#">&nbsp&nbsp Contacte &nbsp&nbsp</a></li>
	</ul>
	<br style="clear: left" />
	</div>

	
	
<div id="divInfoTotal">
	
		<div id="divIzq">
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 20px;">Contacte</label><br/><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Carrer Ignasi Iglesias s/n</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Cornellà del Llobregat 08940</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Telèfon: 93.377.81.77</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Fax: 93.474.24.56</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Contacte: [email protected]</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Metro: Cornellà Centre (Línia 5)</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Renfe: Cornellà</label><br/>
			<label for="servicios" style="font: bold 14px calibri;font-weight: bold; font-size: 12px;">Trambaix: Ignasi Iglesias</label><br/><br/><br/><br/>
			

		</div>
		

		<div id="divBanner">
			<img src="img/facebook.jpg"><br/><br/>	
			<img src="img/carnet.jpg"><br/><br/>
			<img src="img/carnet2.jpg"><br/><br/>
			<img src="img/carnet3.jpg"><br/><br/>						
		</div>
		
		
		<div id="divDer">
			<iframe width="375" height="300" frameborder="0" scrolling="no" src="http://maps.google.com/maps/ms?msa=0&amp;msid=206277145783095354427.0004b3d624d9b4505c9f6&amp;ie=UTF8&amp;t=m&amp;vpsrc=1&amp;ll=41.36247,2.071495&amp;spn=0,0&amp;output=embed"></iframe><br /><small></small>
			
			
		</div>
	

</div>

		
</div>

y estilo.css

Código HTML:


body{
text-align:center;
}

#divTotal{
width: 1024px;
margin-top:10px;
border: 4px solid #5f6568;
background-color: #fff;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
}



#divInfoTotal{
width:1024px;
/*border: 0px solid #e8ecef;
background-color: #e8ecef;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;*/
}


#divIzq{
	padding-top:80px;
	padding-bottom:50px;
	margin-left:50px;
	width: 160px;
	float:left;
	text-align:left;
}



#divDer{
	padding-top:60px;
	padding-bottom:60px;
	margin-left:300px;
	width:375px;
}



#divBanner{
	margin-top:50px;
	float:right;
	width:200px;
}

Muchas gracias por su ayuda, imagino que la solución al problema que tengo será sencilla pero tela los dolores de cabeza que me está dando...

Un saludo gente!