Simple CSS Images Side By Side - css

Question

I'm having a problem displaying images side by side inside of an overflow box.
They seem to be going to the end of the box then going to a new line for some reason.
Here's what I got:
<div style="overflow-x:auto; overflow-y:hidden; white-space:nowrap; width:500px; height:145px;">
<?php
for ($i=1; $i<=9; $i++) {
echo "<table><tr><td>";
echo "<img src=\"images/store/" . $i . ".jpg\" height=\"100px\" />";
echo "<br /><center><img src=\"images/store/buy.png\" width=\"75px\" /></center></td></tr></table>";
}
?>
</div>
Any help would be amazing!

Answer 1

I would recommend updating and formatting your code better, then addressing the issue you're having.
Don't echo out HTML tags using PHP.
Don't use inline-styles applied directly to the tags (use classes/ids)
Don't use tables, for non-tabular data.
With that said, here is a working example of what I believe you're trying to achieve:
http://jsfiddle.net/a8yDv/
PHP/HTML:
<div class="images">
<ul>
<?php for ($i=1; $i<=9; $i++) : ?>
<li>
<img src="images/store/<?php echo $i; ?>.jpg" class="top-image" alt="" />
<img src="images/store/buy.png" class="bottom-image" alt="" />
</li>
<?php endfor; ?>
</ul>
</div>
CSS:
.images {
border: 5px solid red;
height: 145px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 500px;
}
.images ul {
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
.images li {
display: inline-block;
text-align: center;
}
.images img {
display: block;
margin: 0 auto;
}
.images img.top-image {
height: 100px;
margin-bottom: 5px;
}
.images img.bottom-image {
width: 75px;
}
/* Clearfix - http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Answer 2

You could use the white-space:nowrap; property in your styles:
div {
overflow-x:auto;
overflow-y:hidden;
white-space:nowrap;
width:500px;
height:100px;
}
Demo.

Answer 3

I believe all I really had was a bug, and #Yamo seemed to point it out for me. Everything works fine now!
<div style="overflow-x:auto; overflow-y:hidden; white-space:nowrap; width:500px; height:145px;">
<table><tr>
<?php
for ($i=1; $i<=9; $i++) {
echo "<td><img src=\"images/store/" . $i . ".jpg\" height=\"100px\" />";
echo "<br /><center><img src=\"images/store/buy.png\" width=\"75px\" /></center></td>";
}
?>
</tr></table>
</div>