SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tumbnail float problem

    Hi all,

    On a site I'm designing, I have a 890px container that will be used to show rows of 4 thumbnails, each having a 30px gap between them. The problem on the actual page however is that the margin of the 4th thumbnail on a row pushes it to the next row, so only 3 thumbs per row are shown.

    I usually fix this by dividing the margin evenly over a right- and left- margin, but this would cause the first thumbnail to move way to far towards the right, and this should only be 5px.

    Is there a way to have my ".item" divs with 30px right-margin without this occurring? I thought having a "overflow:hidden;" on my container div would ignore the margin-right of the 4th thumbnail?

    The CSS:
    Code CSS:
    div#category_container{
    width: 890px;
    margin-left: 5px;
    overflow: hidden;
    margin-bottom: 25px;
    }
     
        .item{
        width: 192px;
        height: 128px;
        border: 4px solid #aab8bd;
        float:left;
        overflow: hidden;    
        position:relative;
        margin-right: 30px;
        margin-bottom: 25px;
        }

    The HTML/PHP (wordpress based):
    Code HTML4Strict:
    <div id="category_container">
     
        <?php 
        query_posts('posts_per_page=16');
        if ( have_posts() ) while ( have_posts() ) : the_post(); 
        ?>
     
            <div class="item">
            <a href="#"><?php the_post_thumbnail( array(192,128) ); ?></a>
                <div class="caption">
                <a href="<?php echo get_permalink(); ?>"><?php _e('[:nl]galerij openen[:fr]ouvrir galerie'); ?></a>
                </div>
            </div>
     
        <?php endwhile; wp_reset_query(); ?>
     
    </div>

    Thanks in advance for your help
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Remove the width from the container and then drag that container to the left by 25px. Then remove the right margin from the image and make it a left margin instead.

    e.g.

    Code:
    div#category_container {
      margin-bottom: 25px;
      margin-left: -25px;
      overflow: hidden;
      /* width: 890px; remove this*/
      position:relative;/* ie fix */
      zoom:1.0;/* ie fix*/
    }
    
    .item {
      border: 4px solid #AAB8BD;
      float: left;
      height: 128px;
      margin-bottom: 25px;
      margin-left: 30px;
      overflow: hidden;
      position: relative;
      width: 192px;
    }

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is just perfect! Thanks a lot, nice trick to remember for the future as well!
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Glad to help

    If you want to support IE6 you need to add the double margin bug fix also here:

    Code:
    .item {
      border: 4px solid #AAB8BD;
      float: left;
      height: 128px;
      margin-bottom: 25px;
    margin-left: 30px;
      overflow: hidden;
      position: relative;
      width: 192px;
    display:inline;
    }


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
  •