Simular td con divs

[_cronos2]

Buenas tardes amigos, creo que el título no es demasiado descriptivo, así que paso a explicarlo en detalle. Resulta que estoy haciendo un boletín informativo, y me interesa que por cada noticia haya una imagen a la izquierda y el texto a la derecha a la misma altura. El ejemplo es el boletín de desarrolloweb.com.
Pues bien, traté de hacerlo aplicándole vertical-align:middle a la imagen, y todo bien, hasta que añadí un br, entonces se descuadró todo
Viendo el DOM generado, está maquetado con tablas, pero, aunque no voy a entrar a discutir esto ahora, prefiero hacerlo con divs.
Probé con display:table-cell, pero como quien oye llover.
Así que a ver a quién se le ocurre qué es lo que está pasando, o más bien como hacer para que quede como yo quiero.
Saludos y gracias desde ya :3

[C2am]

Mostrar el código que estas usando, vale más que mil palabras.

[rossijona]

No entiendo el BR donde ni porque lo añades.

Te recomiendo crear una lista.

Código HTML:

<ul>
<li>
<img src="ruta de img" alt="necesario para validar"/><span>Texto de noticia</span>
</li>
</ul> 

Más o menos armalo de ese modo, puedes crear un <A que englobe todo.

Luego ve jugando en el css con las propiedades como altura, padding del LI y el line-height para acomodar al centro las letras.

Juega, ve probando con el css hasta lograrlo.

A partir de ahi, bordes a los LI etc etc.

Saludos!.

[_cronos2]

Ups, siempre me pasa lo mismo

Código CSS:

#container {
 height:80%;
 margin:20px;
 overflow:auto;
}
 
#content {
 min-height:65%;
 margin-bottom:0;
 padding:20px;
 background:#987;
}
 
b {
 font:18px Consolas bold;
}
 
#content .apartado {
 margin-bottom:20px;
 padding:5px;
 background:#CC6600;
 font:20px Consolas bold;
}
 
#content .contenido {
 min-height:100px;
 margin-bottom:20px;
 margin-left:5px;
 padding:5px;
}
 
#content .contenido .thumbnail {
 min-width:100px;
 height:100px;
 vertical-align:middle;
}
 
#content .contenido .texto {
 height:100px;
 display:table-cell;
}
 

Código HTML:

<div id="container">
<div id="content">
<div class="apartado"><a name="viajes">Viajes</a></div>
<div class="contenido">
<img src="images/cantábrico/sendaviva.jpg" alt="Parque Sendaviva" title="Parque Sendaviva" class="thumbnail" />
<div class="texto">
Viaje al parque natural Sendaviva<br />
<b>28 / 06 / 11</b> - Visitamos el parque natural Sendaviva, para poder admirar la belleza del entorno y los animales en todo su esplendor.
</div>
</div>
<!-- ... -->
</div>
</div>
 

Saludos (:

[_cronos2]

¿De verdad que a nadie se le ocurre cómo solucionarlo?
Saludos (:

[emprear]

_cronos2:

Hace poco contesté algo similar, revisá este código a ver si te sirve.

http://foros.emprear.com/css/alinear.html

saludos, no seas tan impaciente

[_cronos2]

Muchas gracias @emprear, me funcionó perfectamente!
Saludos (: