imagenes floats en bloques

[ordsanmi]

Hola estoy intentando realizar una simple maquetacion como esta



De la siguiente forma

Código:

#content {
	float: left;
	margin: 15px 0px 0 0px;
	line-height: 19px; 
	display: inline;
	width: 550px;
}

.screenshot_block {
	clear: left;
	margin-bottom: 24px;
	overflow: auto;
	background-color: #CCCCCC;
}

.screenshotleft {
  float: left;
  margin: 0 16px 0 0;
  display: inline; 
}
.screenshotright {
  float: right;
  margin: 0 0 0 16px;
  display: inline; 
}

.cliente {
font-size:110%;
}

Y con el siguiente html

Código:

<div id="content">
		  <div class="screenshot_block">
            <img src="logo.jpg" width="200" height="148" alt="Color Scheme Analyzer" class="screenshotleft" />
          <h4 class="cliente">Titulo 1 </h4>
          <p>blaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaablaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaablaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaablaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa</p>

          </div>
		  <div class="screenshot_block">
            <img src="logo.jpg" width="200" height="148" alt="Color Scheme Analyzer" class="screenshotright" />
          <h4 class="cliente">Titulo 2 </h4>
          <p>blaa blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa  blaa</p>

          </div>
		  <div class="screenshot_block">
            <img src="logo.jpg" width="200" height="148" alt="Color Scheme Analyzer" class="screenshotleft" />
          <h4 class="cliente">Titulo 3 </h4>
          <p>bla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla blabla bla bla bla</p>

          </div>
</div>

Pero no se porque en firefox se ve bien, como la imagen anterior pero en el explorer se me ve de la siguiente forma


a ver si me echais una ayuda, yo pensaba que esto seria lo que menos me costaría y me esta dando muchos dolores de cabeza

Saludos!

[SiR.CARAJ0DIDA]

HOLLY HACK

Código:

.screenshot_block {
	clear: left;
	margin-bottom: 24px;
	overflow: auto;
	background-color: #CCCCCC;
        _height:1%;
}

[ordsanmi]

Me ha funcionado perfectamente. Gracias

He estado leyendo sobre este hack, y habla de cuando se utiliza margin y padding a una misma capa, es cierto eso?

[ordsanmi]

Hola de nuevo, es posible que el paragrafo que va acompañado de la imagen flotante , cuando sobrepase la altura de la imagen siga con el mismo margen que da la imagen y no siga el texto luego por debajo de la imagen?

Es decir una columna para la imagen y otra para el texto. (pero sin la necesidad de crear dos divs distintos uno para cada columna)

Gracias