Introducing text and displaying block versus inline - css

Question

I have a while loop that echos out several images. My next step is to have text over the image. However, as soon as I add that text to the while loop my images go from inline to block. I've tried just about everything from changing the display to inline and playing with the different positions with the images and text. How do I fix this. Code below.
Script Section
<script type="text/javascript" >
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class='spacer'>")
.after("<span class='spacer'>");
});
</script>
Style Section
<style type="text/css">
body {height: 1100px;}
html {height:1200px; }
h2 {
top: 200px;
left: 25px;
width: 100px;
position: relative;
}
div #image_box {width: 700px; display:inline;}
img {border: 1px solid grey; padding: 0; margin:15px; display:inline;}
#viewers_pleasure { padding: 15px; height: 1200px; width: 4800px; }
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}
</style>
Body Section
<div id="viewers_pleasure">
<div id="image_box">
<img src="images/89c246298be2b6113fb10ba80f3c6956_8" width="560" height="420"/>
<h2><br>$</h2>
</div>
<div id="image_box">
<img src="images/8e73b27568cb3be29e2da74d42eab6dd_9" width="560" height="420"/>
<h2><br>$</h2>
</div>
<div id="image_box">
<img src="images/216e77337cdef3bd1bede845d1aba608_3" width="560" height="420"/>
<h2>weezer<br>$0</h2>
</div>
<div id="image_box">
<img src="images/452ff601eb791947cd76a2119f1db973_2" width="560" height="420"/>
<h2><br>$</h2>
</div>
</div>

Answer 1

Try using float left for image_box
div #image_box {width: 700px; display:inline; float:left }

Answer 2

I believe the problem is that the <h2> tags are display:block by default. Try removing them from the flow and see if fixes the image display issue.