Foro de elhacker.NET

CSS

Código

.item {
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #ccc;
    display: inline-block;
    font-size: 0.8em;
    margin:5px;
    max-width: 200px;
}
 
 
    /* resetear */
    .item * { margin: 0; padding: 0; }
 
    .item .image, .item .author { padding: 5px; }
 
    /* Estilo de la imagen */
    .item .image img {
        border-radius: 3px;
        height: 170px;
        width: 170px;
    }
 
    /* Estilo del autor */
    .item .author { display: table; }
 
        /* Posicionamiento de  titulo, imagen y pefil del autor. */
        .item .author .author-img, .item .author .author-info {
            display: table-cell;
            padding:2px 3px 2px 0px;
            vertical-align: top;
        }
 
        /* Estilo imagen del autor */
        .item .author .author-img { }
 
            .item .author .author-img img {
                border-radius: 3px;
                height: 42px;
                width: 42px;
            }
 
        /* Estilo infomracion autor */
        .item .author .author-info {
            line-height: 1.7em;
            padding-left: 4px;
        }
 
            /* Estilo titulo de la imagen */
            .item .author .author-info .title {
                display: block;
                font-weight: 700;
                font-size: 1.2em;
            }
 
            /* Estilo nombre autor */
            .item .author .author-info .profile a {
                color: #069;
                font-weight: 700;
                text-decoration: underline;
            }
 
    /* Estilo comentarios */
    .item .comments {
        border-top: 1px solid #999;
        color: #444;
        padding: 5px;
        text-align: center;
    }

HTML

Código

<!-- Aqui tu while -->
 
<div class='item'>
 
    <div class='image'>
        <img src='' alt=''>
    </div>
 
    <div class='author'>
 
        <div class='author-img'>
            <img src='' alt=''>
        </div>
 
        <div class='author-info'>
            <span class='title'></span>
            <span class='profile'>by <a href='#'></a>.</span>
        </div>
 
    </div>
 
    <div class='comments'>
        <span>X comments, X likes</span>
    </div>
 
</div>
 
<!-- Termina el while -->

DEMO: http://jsfiddle.net/drvy/3wxaz9hc/1/

Los títulos los puedes cortar con CSS o con PHP aunque con CSS es liarse demasiado. Los valores del height/width de las imágenes yo las cambiaría dependiendo de la resolución pero para que quede uniforme, me aseguraría de que siempre tengan el mismo height y el mismo width.

Saludos