Creating table-like boxes in CSS to add images and a caption

[David Nixon]

Hi guys,

I'm a very basic beginner to web design. I want to create boxes in CSS to add photos and captions, like I've done here with tables

http://midlandsreptiles.com/South-Africa-home-new.html

The problem with tables is that if anybody is using a larger or smaller browser the tables aren't in the center, and on some old computers the images are bring forced to the bottom of the screen.

Can anybody help me on adding some CSS that will allow me to add images and captions - sometimes I'll have three images side by side, sometimes one etc... nothing's set in stone. Also will this cure the problem with tables and images not displaying central?

Many thanks,

Dave

 

[Phreaddee]

read up on floats

eg.

<div class="box">
<img srg="image.jpg" alt="image" />
<h4>Caption goes here</h4>
<p><a href="#">some more info</a></p>
</div>
<div class="box">
<img srg="image.jpg" alt="image" />
<h4>Caption goes here</h4>
<p><a href="#">some more info</a></p>
</div>
<div class="box">
<img srg="image.jpg" alt="image" />
<h4>Caption goes here</h4>
<p><a href="#">some more info</a></p>
</div>

.box {
float:left;
width:250px;
}