Hola, sorry por la demora, he estado en reunión con el equipo de trabajo aqui, asi que no he estado fijandome, a ver te iría bien esta?:
El código para esta sería:
Puedes verla en funcionamiento aqui:
Caja.
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>
<title>Enlightenment - creando una caja para el amigo ecuatoriano</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
font-family: verdana,arial;
font-size:12px;
}
div.caja{
position:relative;
left:0;
top:200px;
width:575px;
min-height:50px;
margin:auto;
overflow:hidden;
padding-bottom:7px;
border:1px solid #056d96;
}
*html div.caja{
height:50px;
overflow:visible;
}
div.caja h5{
margin:0;
padding:0;
display:block;
width:100%;
height:19px;
padding-top:3px;
text-align:center;
color:#fff;
font-size:12px;
background:#056d96;
text-transform:capitalize;
}
div.caja div.izquierda{
display:block;
position:relative;
width:290px;
float:left;
min-height:50px;
overflow:hidden;
padding-bottom:5px;
}
*html div.caja div.izquierda{
height:50px;
overflow:visible;
}
div.caja div.derecha{
display:block;
position:relative;
width:285px;
float:left;
min-height:50px;
overflow:hidden;
padding-bottom:5px;
}
*html div.caja div.derecha{
height:50px;
overflow:visible;
}
div.caja div.izquierda ul{
margin:0;
padding:0;
list-style:none;
color:#5b5b5b;
margin-top:17px;
margin-left:10px;
}
div.caja div.izquierda ul li{
margin-top:8px;
}
strong{
color:#056d96;
}
div.caja div.izquierda ul li span{
font-weight:bold;
}
div.caja div.izquierda ul li.link{
margin-top:15px;
}
div.caja div.izquierda ul li a{
display:block;
text-decoration:none;
color:#cfcfcf;
background:#056d96;
width:100px;
text-align:center;
padding-top:1px;
padding-bottom:1px;
border:1px solid #cfcfcf;
<!-- esto no es standard aún-->
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
div.caja div.izquierda ul li a:hover{
background:#5493ac;
color:#fff;
border:1px solid #9b9b9b;
}
div.caja div.derecha p{
margin:0;
padding:0;
width:100%;
text-align:left;
text-indent:10px;
margin-top:8px;
padding-top:2px;
padding-bottom:4px;
color:#6b6b6b;
}
div.caja div.derecha ul{
margin:0;
padding:0;
list-style:none;
width:200px;
height:75px;
padding:1px;
overflow:hidden;
margin-left:10px;
}
div.caja div.derecha ul li{
display:block;
width:33px;
height:33px;
margin-right:5px;
margin-bottom:5px;
float:left;
border:1px solid #cfcfcf;
<!-- esto no es standard aún-->
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
overflow:hidden;
}
div.caja div.derecha a{
display:block;
text-decoration:none;
color:#cfcfcf;
background:#056d96;
width:100px;
text-align:center;
margin-top:5px;
padding-top:1px;
padding-bottom:1px;
border:1px solid #cfcfcf;
<!-- esto no es standard aún-->
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin-left:110px;
}
div.caja div.derecha a:hover{
background:#5493ac;
color:#fff;
border:1px solid #9b9b9b;
}
</style>
</head>
<body>
<div class="caja">
<h5>important information</h5>
<div class="izquierda">
<ul>
<li><strong>Number of rooms:</strong> 10 rooms</li>
<li><strong>Prices</strong></li>
<li><span>Double Room:</span> USD XXXX</li>
<li><span>Single Room:</span> USD XXXX</li>
<li class="link"><a href="#">More prices</a></li>
</ul>
</div>
<div class="derecha">
<p><strong>Maximun Capacity:</strong> 20 people</p>
<ul>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
<li><img src="img/lector.jpg"></li>
<li><img src="img/avatar.jpg"></li>
</ul>
<a href="#">Ask our agents</a>
</div>
</div>
</body>
</html>
He metido bordes redondeados alas imágenes y también a los links, pero no se verán en ie ni ópera, los puedes sacar si quieres, y cambia las imágenes que esas son mías para probar, tus imágenes pasalas de 35 x 35 a 33 x 33, te he puesto el código de manera que se pueda entender, separando las propiedades lo más que se podía.
Saludos!!