desbordamiento de dos bloques

[IsaBelM]

hola, bien los problemas lo tengo con ff e ie. en ff el problema es que el bloque contenedor, en color naranja, toma un alto demasiado exagerado, pero en el colector, contenedor_secciones, el height está con el valor relativo 100%.
el otro problema es en ie, el height de lo bloques de color carne de nuevo se desborda. el colector que controla esta parte es secciones
os dejo el css, html y una imagen para ver si dais con la solución a estos problemas

gracias

Código CSS:

.contenedor_secciones {
  background: orange;
  height: 100%;
  padding: 20px 7px;
}
 
 
.secciones {
  background: #C89580;
  float: left;
  width: 238px;
  height: 138px;
  margin: 10px 35px;
}
 
 
.secciones div{  
  background: #111;
  /*color: #FFF;*/
  text-align: center; 
  filter: alpha(opacity=55); 
  opacity: .55;  
  position: relative;  
  bottom: 37px;
  *bottom: 41px;
  left: 0px;  
  padding: 10px;
  margin: 0px 1px;
  border-top: 1px solid #999;
  *height: 1px; /* solo para IE */
}  
 
 
.secciones a {  
  color: #FFF;
  text-decoration: none;
}
 

Código HTML:

<div class="contenedor_secciones">
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
<div class="secciones">
<img src="./anfora.png" />
<div><a href="#">Imitaciones de ánforas antiguas</a></div>
</div>
 
     </div>