Tumbnail float problem

HTML & CSS
1

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:


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):


<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

2

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.


div#category_container {
  margin-bottom: 25px;
  margin-left: -25px;
  overflow: hidden;
 [B] /* width: 890px; remove this*/
  position:relative;/* ie fix */
  zoom:1.0;/* ie fix*/[/B]
}

.item {
  border: 4px solid #AAB8BD;
  float: left;
  height: 128px;
  margin-bottom: 25px;
 [B] margin-left: 30px;[/B]
  overflow: hidden;
  position: relative;
  width: 192px;
}
3

That is just perfect! Thanks a lot, nice trick to remember for the future as well!

4

Glad to help:)

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


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