The code I wrote for a site I am working on makes the pictures in the gallery ovelapping the container
[code].....................
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Edo Nation</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="Edo.css" />
div id="container">
<div class="textblock">
<h1>Edo Cultural Pictures</h1>
<p class="intro">A selection of indoor sod options: reviewed and tested by <strong>CosmoFarmer.com</strong> in our state-of-the-art “Apartment Laboratory” on 5th Avenue. </p>
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="carpet.jpg" alt="Carpet Grass" width="200" height="200" /> </div>
<p>Figure 1: Even the carpet-like <em>Carpetorium Pratensis</em> requires mowing. </p>
</div>
<div class="figure">
<div class="photo">
<img src="grass.jpg" alt="Bentgrass" width="200" height="200" /> </div>
<p>Figure 2: Creeping Bentgrass is best suited for outdoor use and should be avoided by the indoor farmer.</p>
</div>
<div class="figure">
<div class="photo">
<img src="bluegrass.jpg" alt="Bluegrass" width="200" height="200" /> </div>
<p>Figure 3: This indoor-hybrid of Kentucky Bluegrass has fallen out of fashion. </p>
</div>
<div class="figure">
<div class="photo">
<img src="leaves.jpg" alt="Leaves" width="200" height="200" /> </div>
<p>Figure 4: <em>Tinea Pedis Poaceae</em> threatens discomfort to bare feet. </p>
</div>
<div class="figure">
<div class="photo">
<img src="pattern.jpg" alt="Pattern Grass" width="200" height="200" /> </div>
<p>Figure 5: The difficult to maintain pattern of this indoor lawn is a sight to behold. </p></div>
<div class="figure">
<div class="photo">
<img src="dandelion.jpg" alt="Dandelion" width="200" height="200" /> </div>
<p>Figure 6: The dandelion: scourge of the apartment farmer.</p></div>
CSS..............................
.nav {
display : inline;
}
.figure {
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo {
background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
/* IE 5/6 border erase bug */
* html #gallery {
width: 100%;
}
/* IE 5 placement bug */
* html #gallery img {
width: 100%;
}