Hola, agradecería me pudieran ayudar con el siguiente problemilla. Tengo una pagina y la maquetación está hecha con capas. La idea general de la pagina es: Al al lado izquierdo tengo una capa llamada menu1 donde se muestra un menu, al centro tengo 5 capas, donde en la capa FotoG se muestra una foto grande y debajo de esta 4 fotos pequeñas y cada foto pequeña en su respectiva capa. En el lado derecho tengo una capa llamada descrip donde va una descripcion de la Foto grande. El problema que tengo es que cuando la descripcion es muy larga, las 4 fotos pequeñas se separan de la foto grande y esa no es la idea, ya que quiero que las fotos pequeñas siempre esten por debajo y pegaditas a la foto grande. A continuacion pongo el archivo html y el archivo de estilo:
index.html
pagina.css
index.html
<!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=iso-8859-1" />
<title>CATALOGO</title>
<link href="pagina.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fondo">
<div id="global">
<div id="cabecera"></div>
<div id="menu1" style="background-color: #FFFF00" >
<p align="center" style="color:#333399">PRODUCTOS</p>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
</ul>
</div>
<div id="imagenes">
<div id="fotoG">FOTO GRANDE</div>
<div id="descrip" style="background-color:#CCCCCC" style="font-size: small;" align="justify" >
Hombres y mujeres de distinta condición cultural, racial o étnica conforman nuestro staff que cautiva por sus elementos diferenciadores y ciertamente profesionales. Destacan modelos bellas, cultas y bilingües, capaces de interactuar con éxito ante todo evento de primer nivel y según los estándares de protocolo internacional más exigentes. Ellas, delicadas, finas y femeninas. Ellos, caballeros, atentos, y varoniles. Así, con inusitada sorpresa clientes constatan que las/os modelos presentados por nuestra agencia, tienen destacado comportamiento, y disposición, junto a una pulcra presencia, en atención al sello distintivo que nuestra estilo y trato imprime. Alejados del ruido de la farándula cada modelo presentada/o por Agencia Promodel Chile, encarna la distinción, elegancia y clase que toda empresa moderna reclama.
</div>
<div id="foto1" style="background-color:#FF00FF"></div>
<div id="foto2" style="background-color:#FF66FF"></div>
<div id="foto3" style="background-color:#FF99FF"></div>
<div id="foto4" style="background-color:#FFCCCC"></div>
</div>
</div> <!--Fin capa Global -->
</div> <!--Fin capa Fondo -->
</body>
</html>pagina.css
body {background-image: url(../img/fondo.jpg);
}
#fondo {background-color:#FFFFFF;
width:850px;
height:auto;
margin: 4px auto;
padding: 6px 0px;
/* text-align:center*/
}
#global {margin: 0px auto;
width: 800px;
}
#cabecera { background-image:url(../img/degradado1.jpg);
height: 120px;
margin: 0px 0px 4px 0 px
}
#logotipo {float:left;
padding: 13px 0px 10px 13px
}
#banner {float:right
}
#navegacion {margin: 4px 0px 4px 0px; background-color: #000066}
#navegacion a {color: #CCCCCC; text-decoration:none; margin: 1px; font-weight: bold}
#navegacion a:link {}
#navegacion a:hover {color: #FFFFFF; background-color:#000000}
#navegacion a:active {color: #99FFFF}
#navegacion a:visited {}
#menu1{float:left; width:200px;text-align:left; padding:2px}
#imagenes{ height:-1%; overflow:hidden}
#fotoG{float:left;width:400px; height:300px; background:#FFCC99}
#foto1{float:left;clear:left; width:93px; height:80px; margin: 2px 6px 2px 0px}
#foto2{float:left;width:93px; height:80px; margin: 2px 6px 2px 0px }
#foto3{float:left;width:93px; height:80px; margin: 2px 6px 2px 0px }
#foto4{float:left;width:93px; height:80px; margin: 2px 6px 2px 0px }
.imagen{width: 95%;height: 95%;}
#descrip{ float:left;
width:185px;
height:auto;
margin: 2px 2px 2px 4px}
#pie {height:20px; width:800px; color:#FFFFFF; font:bold; background:#003399;margin: 4px auto;}
.tit_cat {
color: #FFCC33;
font-weight: bold;
font-size: 18px;
font-style: italic;
}
#sep_cat{
width:199px;
color:#000099;
left:auto;
border: 1px #ccc;
margin:0 auto;
height:2px
}
#p_cat {text-indent: 0.5cm; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:11px;
margin-bottom: 0;
margin-top:0;
}