El CSS
Código
#cuerpo{ width:100%; height:600px; } #footer{ width:990px; height:150px; margin:auto; background-color:#FFF; text-align:center; border:1px solid #DBDBDB; } #cuerpo #izq{ width:369px; float:left; height:300px; background-color:green; } #cuerpo #derech{ width:369px; float:left; } #cuerpo .menu{ height:100%; width:250px; float:left; border-left:1px solid #DBDBDB; } .video{ margin-top:20px; margin-bottom:10px; height:190px; width:300px; border: 1px solid #DDD; box-shadow: 3px 3px 3px #999; -moz-box-shadow: 3px 3px 5px #999; -webkit-box-shadow: 3px 3px 3px #999; padding:2px; } .video img{ height:160px; width:300px; } .video p{ margin-top:4px; background-color:white; } /* fotos prueba -- */ .contenedor{ list-style:none; } .contenedor li{ float:left; margin-right:20px; margin-top:10px; } .imagen{ margin-bottom:10px; max-height:300px; width:300px; border: 1px solid #DDD; box-shadow: 3px 3px 3px #999; -moz-box-shadow: 3px 3px 5px #999; -webkit-box-shadow: 3px 3px 3px #999; padding:2px; } .imagen img{ max-height:300px; max-width:300px; }
Y el HTML:
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="includes/css/index.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="contenedor"> <div id="medio"> <div id="header"> </div> <div id="menu"> </div> <div id="cuerpo"> <div id="izq"> <ul class="contenedor"> <li class="video"> <img src="http://i1.ytimg.com/vi/hEi8wnNzius/mqdefault.jpg" /> </li> <li class="imagen"> <img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120827.jpg" /> </li> <li class="imagen"> <img src="http://cdn.ebaumsworld.com/mediaFiles/picture/2152390/83120846.jpg" /> </li> </ul> </div> <div id="derech"> asdfasdf </div> <div class="menu"> menu </div> </div><!-- FIN CUERPO --> </div><!-- FIN MEDIO --> <div id="footer"> Footer </div> </div><!-- FIN CONTENEDOR --> </body> </html>
Aquí una imagen con el resultado:
http://oi49.tinypic.com/2ljqkg8.jpg
Incluso reduciendo el tamaño de la lista <ul> sigue haciendo lo mismo:
http://oi46.tinypic.com/2ntjmev.jpg
(lo verde es la lista <ul>)
Gracias de antemano.