CSS Forum

Heres the relevant code:

<div class="pagecontentmiddlebox">
<div class="windowboxtitle">
Latest.</div>
<br>


<div class="thumbboxcontent">
<div class="thumbboxtitle"><a href="stainedskulls.php">Stained Skulls</a></div>
<a href="stainedskulls.php"><img src="images/stained_thumb.jpg" alt="Stained Skulls Thumbnail" border="0"></a>
</div>

<div class="thumbboxcontent">
<div class="thumbboxtitle"><a href="midnightpirate.php">Midnight Pirate</a></div>
<a href="midnightpirate.php"><img src="images/midnightpirate_thumb.jpg" alt="Midnight Pirate Thumbnail" border="0"></a>
</div>
<br>


</div>
</div>


And the CSS:

.thumbboxtitle{
text-align:center;
color:#FFFFFF;
position:relative;
width:134px;
height:20px;
z-index:1;
background-color:#A40000;
background-image: url('images/windowtitlebar.jpg');
background-repeat: repeat-x;
}

.thumbboxcontent{
position:relative;
left:16px;
width:134px;
height:148px;
z-index:3;
background-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#A40000 #A40000 #A40000 #A40000;
}

.windowboxtitle{
text-align:center;
color:#FFFFFF;
position:relative;
width:100%;
height:20px;
z-index:1;
background-color:#A40000;
background-image: url('images/windowtitlebar.jpg');
background-repeat: repeat-x;
}


.pagecontentmiddlebox{
text-align:left;
position:relative;
margin-left:300px;
width:500px;
z-index:2;
background-color:#FFFFFF;
border-style:solid;
border-width:1px 1px 1px 1px;
border-color:#A40000 #A40000 #A40000 #A40000;
}


Now my problem is these Divs appear and render correctly except that instead of being placed next to each other they are going onto a new line and appearing directly below each other. Any ideas? I want the Thumbnails to appear next to each other on a row. 3 on a row.