Repetir color de fondo teniendo overflow:visible

Fsg · #1 (**permalink**) 18/09/2011, 22:46

Hola que tal, aqui con una duda sobre css, no se si se pueda, o sea un error mio.

Basicamente tengo una capa con un color de fondo, ejemplo negro, y dentro de esa div,tengo varias divs, que en teoria deberia de al ir creciendo el contenido de las divs internas, la div principal deberia de crecer con el tipo overflow:visible;

El problema cae, es que la div principal si crece, mas su color de fondo no se repite,¿hay alguna manera de hacer que con overflow:visible , crezca la div junto con el color de fondo?.

Dejo aqui un ejemplo del problema, la verdad se que es algo sencillo, pero no logro ver cual es el error y como solucionarlo de esta manera(pudiera hacer una imagen y darle como fondo que repita y, pero he visto paginas que lo hacen con un simple color de fondo y la verdad no se que sea el error):

Código:

<html>
	<head>
		<title>PRUEBA</title>
		<style>
			#esqueleto{
			width:100%;
			margin-top:15px;
			overflow:visible;
			background-color: #f7efd6;
		}
		
			.botonleermas{
			-webkit-box-shadow: 0 1px 1px #fff1ab, inset 0 1px 1px #338638;
            -moz-box-shadow: 0 1px 1px #fff1ab, inset 0 1px 1px #338638;
			border-top-left-radius: 5px;
	        border-top-right-radius: 5px;
			border-bottom-left-radius: 5px;
	        border-bottom-right-radius: 5px;
            background-color:  #0e67ab;
	        text-shadow: #2D7832 0 1px 1px;
	        font-family: Gnuo;
	        float:right;
	        margin-top:9px;
	        letter-spacing: 2px;
            font-weight: normal;
            font-style: normal;
	        color:white;
	        width:82px;
	        text-align:center;
	        height: 28px;
		}
		</style>
	</head>
	<body>
		<div id=esqueleto>
				<div style="width:300px; height:300px;  float:left; margin-left:10px; margin-top:20px;" >
	<img src="ayudanosaayudar.gif">
					</div>
<div style="width:600px; overflow:visible; float:right; margin-right:10px; border-bottom: 1px solid #E8E8E8; margin-top:10px; text-align:right;">
				<span class="titulos">Articulos</span>
				<div style=" width:100%; height:200px; float:right;margin-top:20px;">
				<h1 style="border-left: 5px solid #DDD; font-family:'Tinos';"><div style="width:48px; height:48px; float:left; background-color:black;"></div>Bienvenidos a la jungla</h1>
				<span id="notita">Las imÃ¡genes prediseÃ±adas o clipart son diseÃ±os que nos pueden ayudar a decorar una pÃ¡gina web, un anuncio, un folleto o simplemente ayudarnos a mejorar...</span>
				
				<div class="botonleermas"><a href="#">Leer Mas</a></div>
				</div>
				
			</div>
				
			</div>
	</body>
</html>

Saludos a todos, espero puedan ayudarme.

C2am · #2 (**permalink**) 19/09/2011, 02:51

cambia overflow:visible por overflow:auto;

saludos