How to align picture perfectly?

Question

How do I align my pictures perfectly I've got them next to each other but ones slightly lower than the other and I can't get them on the same line. Is there anyway apart from position relative that I can use?

Here is my code:

#newRelises{
  width:650px;
  float:left;
  margin-left:15px;
  margin-top:5px;
}

#newRelises img{
  width:170px;
  height:170px;
  float:left;
  display:inline;
  margin-left:15px;
  margin-bottom:15px;
}

Answer 1

You may add "overflow:hidden;" . SO your final code will be like this:

#newRelises{
width:650px;
float:left;
margin:5px 0 0 15px;
overflow:hidden;
}
#newRelises img{
width:170px;
height:170px;
float:left;
display:block;
padding:0;
margin:0 0 15px 15px;
}

Answer 2

Try this on both images.

img {display:inline-block;}

Update: And I see @adaam already posted a fiddle as a comment, so I am going to copy it down here since it's the same solution:

http://jsfiddle.net/elvista/cKePX/2/

Answer 3

Try this:

1. Get rid of float:left from #newRelises and #newRelises img
2. change display:inline to display:inline-block
3. If you want your images centered, add text-align:center to #newRelises