I have some CSS to display thumbnails:
/*for the image*/
div.float {
float: left;
padding: 2px;
/*for the caption*/
div.float p {
text-align: center;
/*for the text description*/
div.description {
padding: 2px;
border: 1px solid #666666;
width: 300px;

div.description p {
text-align: left;
/*to make a space at the end*/
div.thumbspacer {
clear: both;
/* to contain everything*/
div.thumbcontainer {
border: 1px dashed #333;
background-color: #E8E8E8;
Any my HTML:

 <!-- thumbnail starts----------------------------------------------------->  
    <div class="thumbcontainer">
     <h2>Recent Projects</h2>
      <div class="float"> 
		<a href="#"><img src="portfolio/thumb.jpg"
alt="image1" width="200" height="150" border="0" /></a><br />
        <p>Image title<br />
        [click thumbnail for larger image]        </p>
      </div><!-- float  -->
	 <div class="description">
	   <p><strong>Project Description:</strong> The website was built using an open-source
	     DotNetNuke (DNN) portal application and customized for the client. This
	     included a sophisticated application for client contact and maintenance
	     and gives the client full control over the extensibility and maintenance
	     of their site..<br />
	   <br />
	View the site at: <a href="http://www.website.net" target="_blank">www.website.net</a><br />
	<br />
	 </div><!-- Description -->
      </div><!-- thumbcontainer -->
	  <div class="thumbspacer"> &nbsp; </div> 
<!-- end thumbnail -->
I want the thumbcontainer div to hold everything. Its weird but the float and description divs appear to be outside the thumbcontainer div which they shouldn't be. I think I might have the div order in my css code wrong. can anyone help me with this?