Contain text within - css

Question

CSS question: I'm wanting a container with 3 inline images with a border around them (not each image). Under the image row and inside the container border I want a sentence or two of text. Without the text the container border is about the same width and height as the image row using display:inline-block, once I add the text the container width is 100%. I want the text to wrap under the image row and not expand beyond the left/right sides of the image row. I would like to know how this can be done and if it can be done using float:left and/or display:inline, display:inline-block. If it can be done both ways what are the pros and cons.
HTML:
<div class="container">
<img src="image1">
<img src="image2">
<img src="image3">
some text
</div>
CSS:
.container {
display: inline-block;
border: 1px solid black;
}

Answer 1

The following will create a div, with inner blocks for images and a block for text. They should both stay 500px. If the images are > 500px they will be clipped. The text won't cause it to overflow unless its a very long uninterrupted string.
If this doesn't help, use jsFiddle to put up an example.
CSS
.container {
width: 500px;
overflow: hidden;
background:red;
display: inline-block;
border: 1px solid black;
}
HTML
<div class="container">
<div class="images">
<img src="image1">
<img src="image2">
<img src="image3">
</div>
<div class="caption">
some text
</div>
</div>

Answer 2

This is a good example of what I'm wanting but with the text below the images. I would also like it to be HTML 5 compatible.
<div class="container">
<table>
<tr>
<td><img src="image1.jpg" height="200"></td>
<td><img src="image2.jpg" height=200"></td>
</tr>
<caption>a paragraph of text here...</caption>
</table>
</div>
.container {
display: inline-block;
border: 1px solid;
}
table {
margin: 0 auto;
}