How do I get my images to line up horizontally

[JohnD1969]

I'm having trouble getting my images to line up horizontally. I have 3 images that are lined up on top of each other instead of horizontally. They are the Motorcycle, ATV and Snowmobile.

Here is the code that I'm using:

<style type="text/css">
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>



And here is the image code:


<p>
<div class="picture left" style="width:240px;"> <img

src="http://performancetrends.com/Definitions/Images/motorcyclenitrous.jp

g" width="240" height="240" alt="Nitrous Oxide Kit on a Motorcycle" />

<br /><center>Nitrous Oxide Kit installed on a Motorcycle - Image

courtesy of <a href="http://www.dynotunenitrous.com">Dyno

Tune</a></center> </div>

<div class="picture middle" style="width:240px;"> <img

src="http://performancetrends.com/Definitions/Images/QuadNitrous.jpg"

width="240" height="240" alt="Nitrous Oxide Kit on ATV" /> <br

/><center>Nitrous Oxide Kit installed on an ATV - Image courtesy of <a

href="http://www.startingline.com">The Starting Line Speed &

Custom</a></center> </div>

<div class="picture right" style="width:240px;"> <img

src="http://performancetrends.com/Definitions/Images/SnowmobileNitrous.jp

g" width="240" height="240" alt="Nitrous Oxide Kit on Snowmobile" /> <br

/><center>Nitrous Oxide Kit installed on a Snowmobile - Image courtesy of

<a href="http://www.csracingcanada.com/">CS Racing</a></center></div></p>


If you need more info here is the link to the page:

http://performancetrends.com/Definitions/Nitrous-Oxide.htm

[drhowarddrfine]

You divs with the classes "picture middle" and right, add to the CSS 'float:left' but that will also bring up the next section on the right side.

Technical term: "Holy crap!" What software did you use to create this? It's the worst I've ever seen!

I'll look at fixing the right side if you need help.

[JohnD1969]

I'm using notepad to modify the code. I found the code on the web and am now trying to modify it to do what I want. It worked find until I wanted the images to line up horizontally.

I'm pretty good with HTML but have no idea how to modify CSS. I can insert CSS into pages but if the code needs to be modified, I'm screwed.

[drhowarddrfine]

Most of it was made with some Microsoft product, probably FrontPage. The HTML is horrible; a serious case of 'divitis' where everything is wrapped in multiple div elements. I'd bet 50% of the HTML could be eliminated if rewritten.

[JohnD1969]

OK, now I understand what you are getting at. Yes the original site was made with Front Page (it's a big problem). The owner doesn't want to get a new program because he doesn't want to learn something new.

It sounds like this would be more work than I want to put in. Maybe I will just leave out the images that are giving me a problem.