How do I place images side by side instead of on top of each other?

[Calgrrl]

I'm trying to update my photo gallery on my website, and I know how to add a picture with a caption, but they all just end up on top of each other. I'd like to have a row of about 3-4 pictures, then start another row underneath. How do I do this??

Thanks! :o

[felgall]

style="float:left"

[Calgrrl]

This is my code....Whereabouts should I enter what you told me to?


<table class="image">
<caption align="bottom" class="txt-content12">Tabby</caption>
<td><img src="images/Tabby1.jpg" width=100 height=109 style="padding:2px 2px 2px 2px;background-color: #AC714E"; /></td>

[WebJoel]

First off, get rid of TABLE for holding IMAGES. :) TABLE = TABULAR (comparative data, etc. not images).

Do this instead:

<div style="width:410px; height:105px; border:1px solid red; padding:5px;">

<img alt="this is image #1" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />
<img alt="this is image #2" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />
<img alt="this is image #3" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />
<img alt="this is image #4" src="#" style="width:100px; height:100px; border:1px solid blue; float:left;" />

</div>
and from this, you can 'style' in ways that TABLE layout cannot possibly compete with (adding padding to the img, background-color to the DIV which shows-thru around the edges of the images, etc.. MUCH more efficient than using cellpadding and cellspacing and such).

[condoexpress]

Or if you would rather stick with tables, split your row into additional cells and place an image in each one