Float Caption Left & Other problems

I’m not sure if it’s okay to post a html/css code question here.
Please advise if I should post elsewhere.

Basically I’m trying to get a nice hotel list at http://www.europetravelsaver.com/hotel-test-page/ but as you see there are errors.

(1) I don’t know why the image caption does not stay with the image
(2) I don’t know why the “Link to Hotel” is almost centred. I hoped it would be level with the paragraph above it.

This is the CSS I wrote for this but as a newbie I’m not sure if it’s correct. I suspect I should be using classes and not IDs (?):

=======================================================================

#photolist {
font-size: normal;
margin: 0 auto;
}

#photolist h3 {
color: #ff6600;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-size: 13px;
}

#photolist p {
padding-bottom: 10px;

}

#photolist h3, #photolist p {
margin-left: 120px;

}

#photolist a, #photolist a:visited {
color: #557FFF;
font-weight: bold;
text-decoration: none;
margin-left: 120px;
}

#photolist a:hover {
color: #FF6600;
font-weight: bold;
text-decoration: none;
margin-left: 120px;
}

img {
float: left;

}

=======================================================================