el problema en cuestion es el div llamado "caja". gracias por la ayuda
Código HTML :
<div id="content"> <div class="banner"></div><!-- FIN banner. --> <div class="banner-content"> <div class="logo"><img src="img/logo.png" width="157" height="140" alt="logo" /></div> <div class="botonera"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('inicio','','img/boton_inicio-over.png',1)"><img src="img/boton_inicio.png" name="inicio" width="140" height="80" border="0" id="inicio" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('empresa','','img/boton_empresa-over.png',1)"><img src="img/boton_empresa.png" name="empresa" width="140" height="80" border="0" id="empresa" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('productos','','img/boton_productos-over.png',1)"><img src="img/boton_productos.png" name="productos" width="140" height="80" border="0" id="productos" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contacto','','img/boton_contacto-over.png',1)"><img src="img/boton_contacto.png" name="contacto" width="140" height="80" border="0" id="contacto" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('face','','img/facebook-over.png',1)"><img src="img/facebook.png" name="face" width="32" height="80" border="0" id="face" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('skype','','img/skype-over.png',1)"><img src="img/skype.png" name="skype" width="32" height="80" border="0" id="skype" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('twit','','img/twit-over.png',1)"><img src="img/twit.png" name="twit" width="32" height="80" border="0" id="twit" /></a></div><!-- FIN banner botonera. --> </div><!-- FIN banner content. --> <div class="slide"><img src="img/slide.jpg" width="1000" height="420" alt="slide" /></div> <div class="caja"> <div class="cajita-larga"><h1>Bienvenidos</h1><br /> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget dolor eget odio bibendum interdum. Donec eget mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. Vivamus sodales dui quis lorem suscipit, eget tempor augue pretium. Donec ac enim ante. Ut faucibus ante id ornare aliquam.</h2></div><!-- FIN cajita larga. --> <div class="cajita-01"><img src="img/img-01.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3> <p>Donec eg et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br /> <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><div class="cajita-01"><img src="img/img-02.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3> <p>Donec eg et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br /> <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><div class="cajita-01"><img src="img/img-03.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3> <p>Donec eg et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br /> <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><div class="cajita-01"><img src="img/img-04.jpg" width="210" height="100" /><h3>Praesent a dui sed eros facilisis</h3> <p>Donec eg et mi tempus, facilisis felis sed, faucibus ante. Aliquam vel tortor scelerisque, eleifend elit non, sollicitudin elit. Vestibulum congue nisl turpis, id hendrerit ipsum fermentum et. <br /> <img src="img/leer-mas.gif" width="90" height="30" class="leer-mas" /> </div><!-- FIN divs cajitas. --> </div><!-- FIN caja. --> <div class="footer"> <div class="footer-content"> <div class="foot-01"> <ul>INICIO<br /> EMPRESA<br /> PRODUCTOS<br /> CONTACTO </ul> </div> <div class="foot-01"> </ul> </div><div class="foot-01"> </div><div class="foot-01"> </div></div><!-- FIN FOOTER_content. --> </div><!-- FIN FOOTER. --> </div><!-- FIN CONTENEDOR. -->
y acá el css:
Código CSS :
body { background-attachment: fixed; background-image: url(img/fondo.jpg); background-repeat: repeat; margin: 0px; height: 100%; width: 100%; } #content { text-align: center; width: 100%; height: 100%; } .banner { background-color: #000000; height: 80px; width: 100%; position: relative; opacity: 0.7; filter: alpha(opacity=20); } .banner-content { position: absolute; float: left; height: 157px; width: 1000px; margin-left: -500px; z-index: 1; left: 50%; top: 0px; } .logo { height: 140px; width: 157px; position: absolute; float: left; z-index: 3; left: 5px; } .botonera { height: 80px; width: 843px; position: relative; float: right; text-align: left; } .slide { height: 420px; width: 1000px; position: relative; margin: 0 auto; } .caja { height: auto; width: 1000px; background-color: #000; background-attachment: fixed; background-repeat: repeat; position: relative; margin: 0 auto; ; } .cajita-larga { background-color: #CCC; height: auto; width: 980px; text-align: left; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-top: 20px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; position: relative; } .cajita-01 { float: left; height: auto; width: 210px; position: relative; text-align: left; padding-top: 20px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 24px; color: #666; text-decoration: none; display: inline; font-weight: lighter; } h2 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; color: #333; text-decoration: none; display: inline; font-weight: lighter; } h3 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #333; text-decoration: none; display: block; padding-top: 5px; padding-bottom: 0px; } p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #333; text-decoration: none; display: block; line-height: 14px; font-style: normal; } .leer-mas { display: block; float: left; padding-top: 10px; } .footer { background-color: #000000; height: auto; width: 100%; position: relative; float: left; margin: 0 auto; text-align: center; opacity: 0.9; filter: alpha(opacity=20); } .footer-content { height: auto; width: 1000px; text-align: center; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } .foot-01 { float: left; height: auto; width: 240px; position: relative; text-align: left; padding-top: 5px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } ul { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #FFF; list-style-type: none; margin-left: -30px; line-height: 20px; }