How do I make CSS row boxes?

Question

I'm trying to make a few rows like in a table, but with divs.

Each one has an image on the left, a block of text, and "read more"..

I've tried using display:table, but it doesn't seem to be working.. The text is and images are not aligned properly..

http://jsfiddle.net/76a4j/1/

.entry{
width=100%;
display:table;
}

entry-row {
border: 2px #000000 solid;
margin-top:5px;
   margin-bottom:5px;
 display: table-row;
}

.imgrL {
border: 1px solid #c7c5c8;
padding: 5px;
float:left;
clear:left;
}

Thanks for the answers everyone, I see what I did wrong and have fixed it now :)

Answer 1

JSFiddle

Here is the solution you want:

HTML

<div class="entry">
    <a href="#">
        <img src="#" />
    </a>
    <div class="text">
        <h3 class="title">Article 1</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Curabitur scelerisque arcu at accumsan feugiat. Fusce at interdum sapien. 
            Phasellus nec odio varius ante imperdiet facilisis. Etiam iaculis dui vitae nibh scelerisque fermentum. 
            Nam iaculis quis purus ac congue. Maecenas sed elit tortor. 
            Sed gravida velit nulla, sit amet dapibus elit mollis vitae. 
            In libero libero, mattis et ipsum eu, euismod aliquet diam. 
            Nulla eu neque interdum, suscipit libero nec, facilisis sapien. Donec consequat porttitor interdum. 
            Nullam non blandit massa.<a href="#" class="read-more">Read more</a>
        </p>
    </div>
</div>

CSS

.entry > a {
    float: left;
}

.entry img {
    width: 130px;
    height: 130px;
}

.entry .text {
    float: right;
    width: 700px;
}

.entry:after {
    clear: both;
    content: '';
    display: block;
} 

.entry .title {
    color: #FF7A00;
    font-family: arial;
    font-size: 15px;
}

.entry .text {
    margin: 0px 0px 0px 20px;
}

.entry .text * {
    margin: 0px;
}

.entry .read-more {
    float: right;
}