How to get thumbnail images to line up across a page in rows?

I need help with css

[slam38]

Hi everyone,

I am new to this and have an old question. How do I get thumbnail images to sit in rows across the page?

My code looks like this;

CSS
.gallery {
display: block;
padding: 0 20px;
}
.thumbnail {
font: Arial, Helvetica, sans-serif;
float: left;
clear: both;
width: 150px;
border: 1px solid #663333;
margin: 0 10px 15px 0;
padding: 5px
}

HTML
<div class="gallery">
<div class="thumbnail"><img src="images/wedding/102.jpg"/>
<br />
<p>text in here</p>
</div>
<div class="thumbnail"><img src="images/weddings/103.jpg"/>
<br />
<p>text in here</p>
</div>
</div>

There is obviously more than two images that I want to put on the page, but you get the idea.

What's happening is the images are just lining up underneath each other down the page instead of across the page.

I would appreciate any help with this.

Thanks.

[jameshopkins]

Renove 'clear:both' from .thumbnail

[slam38]

Thankyou jameshopkins,

I'm going to do just that.