How can I move these all the way to the left?

How can I make the images here go more to the left like this?

It's a photoshopped image of what I'm trying to do.

Here's the code I'm currently using.

<img src="images/purpledrink.jpg" align ="left" alt="free purple drink"> <a href="http://www.drinkpurple.com/freesample.htm"><font size=3>Purple Beverage</a></font><br />
Recieve a free sample of purple.<br /><br />

<img src="images/energypunch.jpg" align ="left" alt="free energy punch"> <a href="http://www.cortislim.com/join_cortislim.php"><font size=3>Energy Punch</a></font><br />
Get a fre packet of chewable energy punch tablets.<br /><br />

<img src="images/corazonachips.jpg" align ="left" alt="free corazona chips"> <a href="http://corazonas.com/join/index.html"><font size=3>Corazonas Chips</a></font><br />
3 flavors of Corazonas chips.<br /><br />

<img src="images/meltingpot.jpg" align ="left" alt="the melting pot"> <a href="http://www.themeltingpotclubfondue.com/signup.cgi"><font size=3>The Melting Pot</a></font><br />
Free chocolate fondue for two!<br /><br />


<img src="images/energydrink.jpg" align ="left" alt="free energy drink"> <a href="http://realenergydrink.com/index.php?a=fre&b=eng"><font size=3>Energy Drink</a></font><br />
Fill out the form for a free sample.<br /><br />

Code (markup):

 

it looks like you have to align left first then enter the image and then double break each product to space it out evenly

 

This should work.

<div align=left><img src="images/purpledrink.jpg" align ="left" alt="free purple drink"> <a href="http://www.drinkpurple.com/freesample.htm"><font size=3>Purple Beverage</a></font><br />
Recieve a free sample of purple.<br /><br />

<img src="images/energypunch.jpg" align ="left" alt="free energy punch"> <a href="http://www.cortislim.com/join_cortislim.php"><font size=3>Energy Punch</a></font><br />
Get a fre packet of chewable energy punch tablets.<br /><br />

<img src="images/corazonachips.jpg" align ="left" alt="free corazona chips"> <a href="http://corazonas.com/join/index.html"><font size=3>Corazonas Chips</a></font><br />
3 flavors of Corazonas chips.<br /><br />

<img src="images/meltingpot.jpg" align ="left" alt="the melting pot"> <a href="http://www.themeltingpotclubfondue.com/signup.cgi"><font size=3>The Melting Pot</a></font><br />
Free chocolate fondue for two!<br /><br />


<img src="images/energydrink.jpg" align ="left" alt="free energy drink"> <a href="http://realenergydrink.com/index.php?a=fre&b=eng"><font size=3>Energy Drink</a></font><br />
Fill out the form for a free sample.<br /><br /></div>

Code (markup):

 

Thanks but that doesn't work. I originally wanted to put them all on a row on the left but now I want to put two side by side on each row like the image i showed: http://i28.tinypic.com/8yf81l.jpg

 

what you will need to do then is put you first product in then put the second with the align to the right. hopefully that will work.

 

It didn't work. :[

 

do you have a messenger that we can talk about this on?

 

If you use Macromedia Dreamwaver to edit your code, it easy to use table and put the image into the table...it will be easier to arrange the position...

BR,

Adi

 

Your code is like 10 years old!

Okay, if it could be "modernised" then I think you could float these left. You'd need a div wrapping each image-text pair, and float each of those divs left. They will staack alongside so long as there's room to. So, if you only want two per line, then make each div wide enough that only two can fit. This align=left thing went the way of the dinosaur long ago, and I don't mean birds.

<div class="product">
<img src="images/purpledrink.jpg" alt="free purple drink"> <a href="http://www.drinkpurple.com/freesample.htm">Purple Beverage</a>
<p>Recieve a free sample of purple.</p>
</div>

<div class="product">
<img src="images/energypunch.jpg" alt="free energy punch"> <a href="http://www.cortislim.com/join_cortislim.php">Energy Punch</a>
<p>Get a fre packet of chewable energy punch tablets.</p>
</div>

<div class="product">
<img src="images/corazonachips.jpg" alt="free corazona chips"> <a href="http://corazonas.com/join/index.html">Corazonas Chips</a>
<p>3 flavors of Corazonas chips.</p>
</div>

<div class="product">
<img src="images/meltingpot.jpg" alt="the melting pot"> <a href="http://www.themeltingpotclubfondue.com/signup.cgi">The Melting Pot</a>
<p>Free chocolate fondue for two!</p>
</div>

<div class="product">
<img src="images/energydrink.jpg" alt="free energy drink"> <a href="http://realenergydrink.com/index.php?a=fre&b=eng">Energy Drink</a>
<p>Fill out the form for a free sample.</p>
</div>

Code (markup):

Now you don't need those classes on the divs either, since they should be referred to by the container they're in, but I was too lazy to see what that was : )
Plus it'll make it easier to style. You need to learn CSS! It makes this stuff so much easier. Plus, it gets rid of that asbestos called the <font> tag : )

You can say stuff like:
div.product img {
float: left;
margin: 5px;
}
div.product {
overflow: hidden; (to wrap those floated images since I can't clear them yet)
float: left;
width: I dunno what you want here... however wide they are now minus the space you want between them-- but you need to set a width
margin: whatever margins you want to space them out
display: inline; (to stop IE6 from doubling the margins)
}

You can style the a without font tags:

div.product a {
font-size: 1em;
}
You can set the size to something like small, medium and large, or in pixels, or in ems which is supposed to be the browser's default size. Whatever. You can set the color of the a here too.

Also, you don't need the word "div" in front of the class "product" in the css, I just put it there for clarity. You can do this:
.product {
blah
}
So long as nothing else has that class. If we weren't using classes, we'd use the name of whatever these things are in. If they were in a div called "main" then we'd do this:

#main div {
float: left;
etc...
}
Meaning, every div inside the thing called "main".

The images would be
#main div img{
blah
}

The a's would be
#main div a {
blah
}

etc...

Since you probably don't have an external stylesheet (again, I didn't look), then you'd stick this stuff between the <head></head> tags, near the bottom, like this:
<style type="text/css">
stick the stuff here
</style>
</head>

I dunno if any of this made any sense.