Images not Aligning Correctly

[Maccyjam]

Hey,
I'm fairly new to CSS and I am wanting to create a product layout page, similar to what you may find with Amazon. With my current code, the two test images I have stack (1 goes on top of the other) whereas I would like them to be next to each other.
Here is my current code:
HTML:

<div id="products">    

<a href="TestItem1.html"><b>Test Product 1</b><br />
<img src="Images/Store/TestImage1.jpg" width="250" height="353" alt="Test Product 1" /></a><br />
    
<a href="TestItem2.html"><b>Test Product 2</b><br />
<img src="Images/Store/TestImage1.jpg" width="250" height="353" alt="Test Product 2" /></a><br />   
               
</div>

CSS:

#mainContent {
	width:785px;
	height:auto;
	min-height:340px;
	background-color: #666;
	float: right;
	position:relative;
	top:100px;
	left:0%;
	box-shadow: rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
	border-radius: 30px;
	color: #FFF;
	padding:5px;
}
#products {
	width:inherit;
	height:auto;
	float:left;
}

(The products div is inside of the mainContent div.)
I'm not very experienced with CSS so I have probably made some foolish mistakes. I have tried the 2 divs side by side sticked post but that didn't solve my problem. If any one could help me that would be greatly appreciated!
Thanks in advance,

[chrishirst]

whereas I would like them to be next to each other.

Use floats, that's what they are there for.

http://css.maxdesign.com.au/floatutorial/