How do I float two images side by side with a margin in between?

That didn't work. Here's my markup:

        <div id="wrap">
    <img class="left" id="yankee"src="images/yankee.jpg">
    <img class="right" id="moma" src="images/moma.jpg">
    <img class="left" id="queens" src="images/globe.jpg">
    <img class="right" id="staten" src="images/staten.jpg">
   </div>

A Youtube video I watched told me to put all the images in a wrap div and then set the pixel width for the div. Why can't I set the wrap div width to 100% and then set both images on that row to let's say 45% each and float them next to each other?

Whether the div width is set to 100% or a pixel width shouldn't matter. Also setting 45% width to each image and alternating left and right should work also so I'm not sure why it isn't working for you. Can you also post the CSS you're applying to the div and the images?

It's hard to answer your question without having more specifics, but if you want text under each image, I suggest you wrap each <img> and <p> pair in a <div> and then float the <div>s left. This will ensure the text stays below the images. By floating each left, you keep them on the same (top) line. If you want to ensure they are on the same "line" below, specify a height on your divs. Then make sure to clear any content that comes after to it wont wrap as well.

<div>
<img src="http://placekitten.com/200/150">
<p>This is the first picture. Maecenas id feugiat augue, a egestas eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="fixed">
<img src="http://placekitten.com/200/150">
<p>This is the second picture, though it has fixed height.</p>
</div>
<div class="fixed">
<img src="http://placekitten.com/200/150">
<p>This is the third picture which also has a fixed height. Natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod mollis blandit.</p>
</div>
<p class="clear">This clears all.</p>

div {
  width: 25%;
  border: solid 1px;
  float: left;
  margin: 5px;
  padding: 10px;
}

img {
  display: block;
  margin: auto;
}

.fixed {
  height: 300px;
}

.clear {
  clear: both;
  border-top: solid 1px;
}

Without knowing exactly how your markup looks nor how you want it to look, one example could be to add "float: left" to both images and "margin-right: 10px" to the left image. You may also need to apply "display: block" to the images as well. Then on the paragraph below, add "clear: both" to make sure it stays below the images.