Problems With Aligning Adjacent Objects in CSS

I can't get the featured articles in the side bar to line up properly (here). I'm trying to get them to look more like the ones on this site.

This is the CSS:

 #element2 {
    margin:0 auto;
    padding: 5px 0 0px 0px;
    color:#161514;
    font-family:helvetica, sans-serif, Arial;
    font-size: 13px;
    background: #c7c7c7;
    width: 295px;
    height: 60%;
    }
img.element {
    width:305px;
    position:relative;
    right:auto;
    left:auto;
    height:auto;
    overflow:hidden;
    border:1px solid #ccc;
    width:130px;
    height:100px;
    min-height:100px;
    border:0;
    margin:5px 0px 0px 0px;
    display: in开发者_如何学Cline-block;
    }
p.element {
    position:relative;
    align:right;
    width:140px;
    height:100;
    min-height:100px;
    margin:5px 0px 0px 0px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1pt;
    border:0;
    background:#c7c7c7;
    display: inline-block;
    } 

Any suggestions much appreciated.

Thank you,

Tara

PS: I'm using Chrome 10

you have messed too much with css.
delete p.element and img.element css rules and start styling again using this:

img.element {
    height: 100px;
    width: 130px;
   position: absolute;
}
p.element {
    height: 100px;
    margin-left: 130px;
    width: 140px;
}