div order for image display

**ozmart2004** · Sep 9, 2004, 20:15

I have some CSS to display thumbnails:

Code:

/*for the image*/
div.float {
float: left;
padding: 2px;
}
/*for the caption*/
div.float p {
text-align: center;
}
/*for the text description*/
div.description {
margin-left:250px;
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:

Code:

 <!-- 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 />
	 </p>
	 </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?

THks
Martin

**ozmart2004** · Sep 10, 2004, 01:05

I fixed it by setting the height property of the div.thumbcontainer to 300px and adding a few more <div class="thumbspacer">   </div>

Is there a better or more elegant way to do it?

**Paul O'B** · Sep 10, 2004, 12:47

Hi,

I'm not sure if I quite understand what you want but you must remember that floats are basically removed from the flow and will escape out of the parent container if the container isn't big enough, or if the floats aren't cleared before the closing div of the parent.

Heres an example:

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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
/*for the image*/
div.float {
float: left;
padding: 2px;
position:relative;
}
/*for the caption*/
div.float p {
text-align: center;
margin:0 0 5px 0;
}
/*for the text description*/
div.description {
margin-left:250px;
padding: 2px;
border: 1px solid #666666;
width: 300px;
}
div.description p {
text-align: left;
margin:0;
}
/*to make a space at the end*/
div.thumbspacer {
clear: both;
height:5px;
overflow:hidden;
}
/* to contain everything*/
div.thumbcontainer {
border: 1px dashed #333;
background-color: #E8E8E8;
position:relative;
margin-bottom:10px;
}
</style>
</head>
<body>
<div class="thumbcontainer"> 
  <h2>Recent Projects</h2>
  <div class="float"> <a href="#"><img src="images/pmoblogo7.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 />
	</p>
  </div>
  <!-- Description -->
  <div class="thumbspacer"></div>
</div>
<!-- thumbcontainer -->
<div class="thumbcontainer"> 
  <h2>Recent Projects</h2>
  <div class="float"> <a href="#"><img src="images/pmoblogo7.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 />
	</p>
  </div>
  <!-- Description -->
  <div class="thumbspacer"></div>
</div>
<!-- thumbcontainer -->
</body>
</html>

Hope thats what you meant

Paul

The SitePoint Forums have moved.

User Tag List

Thread: div order for image display

Thread Tools

Display

div order for image display

Bookmarks

Bookmarks

Posting Permissions