Hola! es la primera vez que escribo así que espero que puedan ayudarme.
Te un sitio hecho, y no logro hacer que el largo de mis divs se adapte al largo del contenedor. El contenedor tiene adentro una sombra izquierda, y una sombra derecha que se tienen que alargar auto a medida que el contenedor crece hacia abajo, no sé si me explico. Y las sombras a pesar de que le pongo todo auto no crecen, quedan cortiras.
Este es el codigo html:
<body>
<div id="container">
<div class="sombraiz"></div>
<div class="medio">
<div id="cabezal">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="150">
<param name="movie" value="swf/cabezal_larton.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="swf/cabezal_larton.swf" width="900" height="150">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="9.0.45.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div id="menu">
<img src="img/menu/inicio_on.png" border="0" align="left"/>
<script language=javascript>
trabajosprendida = new Image(154,41)
trabajosprendida.src = "img/menu/trabajos_over.png"
trabajosapagada = new Image(154,41)
trabajosapagada.src = "img/menu/trabajos.png"
</script>
<a href="trabajos.html"
onmouseover="window.document['imagen2'].src = trabajosprendida.src"
onmouseout="window.document['imagen2'].src = trabajosapagada.src">
<img src="img/menu/trabajos.png" border=0 name="imagen2" width=154 height=41 align="left"></a>
<script language=javascript>
dondeprendida = new Image(154,41)
dondeprendida.src = "img/menu/donde_over.png"
dondeapagada = new Image(154,41)
dondeapagada.src = "img/menu/donde.png"
</script>
<a href="donde.html"
onmouseover="window.document['imagen3'].src = dondeprendida.src"
onmouseout="window.document['imagen3'].src = dondeapagada.src">
<img src="img/menu/donde.png" border=0 name="imagen3" width=154 height=41 align="left"></a>
<script language=javascript>
ofrecemosprendida = new Image(132,41)
ofrecemosprendida.src = "img/menu/ofrecemos_over.png"
ofrecemosapagada = new Image(132,41)
ofrecemosapagada.src = "img/menu/ofrecemos.png"
</script>
<a href="ofrecemos.html"
onmouseover="window.document['imagen4'].src = ofrecemosprendida.src"
onmouseout="window.document['imagen4'].src = ofrecemosapagada.src">
<img src="img/menu/ofrecemos.png" border=0 name="imagen4" width=132 height=41 align="left"></a>
<script language=javascript>
experienciaprendida = new Image(132,41)
experienciaprendida.src = "img/menu/experiencia_over.png"
experienciaapagada = new Image(132,41)
experienciaapagada.src = "img/menu/experiencia.png"
</script>
<a href="experiencia.html"
onmouseover="window.document['imagen5'].src = experienciaprendida.src"
onmouseout="window.document['imagen5'].src = experienciaapagada.src">
<img src="img/menu/experiencia.png" border=0 name="imagen5" width=132 height=41 align="left"></a>
<script language=javascript>
noticiasprendida = new Image(174,41)
noticiasprendida.src = "img/menu/noticias_over.png"
noticiasapagada = new Image(174,41)
noticiasapagada.src = "img/menu/noticias.png"
</script>
<a href="noticias.html"
onmouseover="window.document['imagen6'].src = noticiasprendida.src"
onmouseout="window.document['imagen6'].src = noticiasapagada.src">
<img src="img/menu/noticias.png" border=0 name="imagen6" width=174 height=41 align="left"></a>
</div>
<div id="espacio"></div>
<div id="bannerizq"><img src="img/home/banner.gif" border="0" /></div>
<div id="espaciomedio"></div>
<div id="bannerder"><img src="img/home/video.gif" border="0" /></div>
<div id="encabezado">
<h1>Grupo Larton</h1>
<div id="linea"></div></div>
<div id="columnaiz">
<p class="textos">Grupo Larton, ofrece el servicio de diseño y producción de <img src="img/home/Capture.PNG" width="62" height="17" border="0" />creativas para todo tipo de
eventos: Acciones promocionales, Eventos deportivos, Inauguraciones, Convenciones de ventas,
Incentivos de empresa, Congresos, Asambleas, Eventos feriales, Road shows, Juntas de accionistas,
Dinner and talk, Poup retail.
<br/>
<br/>
<span class="bold">* acciones: </span> Dícese de Espectáculos, Audiovisuales, Iluminación, Stands corporativos,
Escenografías, Decoraciones e interiorismo, Tematizaciones y ambientaciones, Exposiciones
y Showrooms, Pasarelas de moda, Escenarios, Gráfica, Coreografías y performance
y Escaparatismo
<br/>
<br/>
<span class="cober">Cobertura nacional </span> desde nuestras sedes en Sevilla, Madrid y Valencia. <br/>
<br/>
</p>
<div id="llamador">
<img src="img/home/texto.png" width="560" height="81" border="0" align="left" />
</div>
</div>
<div id="columnader">
<div id="equipo">
<script language=javascript>
equipoprendida = new Image(174,41)
equipoprendida.src = "img/home/equipo_over.jpg"
equipoapagada = new Image(174,41)
equipoapagada.src = "img/home/equipo.jpg"
</script>
<a href="equipo.html"
onmouseover="window.document['imagen7'].src = equipoprendida.src"
onmouseout="window.document['imagen7'].src = equipoapagada.src">
<img src="img/home/equipo.jpg" border=0 name="imagen7" width=264 height=132 align="left"></a></div>
<div id="noticias">
<h2>Noticias</h2>
<div id="filas">
<span>Grupo Larton realiza eventos Low Cost.</span>
<br/>
<p class="textos">Desde el pasado año 2009 y siendo
<br/> consciente de la dificultad económica que
<br/>estamos atravesando hemos...
<br/>
<a class="leer" href="noticias.html">+ Leer más</a>
</p>
</div>
<div id="filas">
<span>Luis Matas</span>
<br/>
<p class="textos">Escenógrafo y Licenciado en Direccion
<br/>artistica, se incorpora al frente de la
<br/>creatividad de nuestra firma desde ...
<a class="leer" href="noticias.html">+ Leer más</a>
</p>
</div>
<div id="filas">
<span>Cambio de domicilio de nuestra central</span>
<br/>
<p class="textos"> Las oficinas centrales de nuestra firma
<br/>cambia de localizacion. El Parque
<br/>empresarial PISA en la calle brujula ...
<a class="leer" href="noticias.html">+ Leer más</a>
</p>
</div>
</div>
</div>
<div id="pie"><img src="img/home/pie_larton.png" width="900" height="140" border="0" /></div>
</div>
<div class="sombrader"></div>
<div class="clearing"></div>
</div>
y este es el css:
body {
text-align:center;
background-color:#F16824;
margin: 0 auto;
}
#container {
width:960px;
height:auto;
margin: 0 auto;
}
.clearing{
clear:both;
}
.sombraiz {
width:30px;
height:auto;
background-image:url(img/sombraiz.gif);
background-repeat:repeat-y;
float:left;
}
.sombrader {
width:30px;
height:auto;
background-image:url(img/sombrader.gif);
background-repeat:repeat-y;
float:left;
}
.medio {
width:900px;
height:auto;
background-color:#FFFFFF;
border:none;
float:left;
}
LO IMPORTANTE ES QUE LAS SOMBRAS SE ADPATEN AL LARGO DEL CONTAINER PARA QUE PAREZCAN QUE SON PARTE DE LA PAGINA.
Ya probé con varias cosas, pero nada funciona.
espero puedan ayudarme,
muchas gracias!!!