Seguimos con la colocación...

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!

kseso? · #2 (**permalink**) 19/12/2011, 08:09

limpiar float

SiKuSS · #3 (**permalink**) 19/12/2011, 09:27

Cita:

Iniciado por kseso?

limpiar float

Gracias por tu ayuda, aunque no me sirvió, gracias a ti busqué sobre lo de "clear:both" y también hablaban del "overflow"... Gracias a esta propiedad lo he conseguido

Por si alguien más le sirve, substituyendo este bloque de CSS funciona correctamente

Código HTML:

#divInfoTotal{
overflow:hidden;
margin: 10 0 10 0px;
border: 0px solid #e8ecef;
}

kseso? · #4 (**permalink**) 19/12/2011, 13:53

Me alegra ver que supo utilizar una respuesta tan concisa para hallar la solucción.

Pero ¿qué piensa que acaba de hacer? Ni más ni menos que limpiar el flotado. Ya sea usando un div extra, añadiendo el overflow o cualquiera de las otras técnicas (como uso de pseudo-elementos, etc).

Para que comprenda la naturaleza del "problema" con el que se ha topado le enlazo el primer resultado que a mi me aparece al buscar la cadena que le indiqué:
http://www.librosweb.es/css_avanzado...ar_floats.html