SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict ozmart2004's Avatar
    Join Date
    Feb 2004
    Location
    Albury, NSW, Australia
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div order for image display

    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

  2. #2
    SitePoint Addict ozmart2004's Avatar
    Join Date
    Feb 2004
    Location
    Albury, NSW, Australia
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed it by setting the height property of the div.thumbcontainer to 300px and adding a few more <div class="thumbspacer"> &nbsp; </div>

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

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •