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 }