Overflow Help: Simple Question WordPress

• SOLVED

I'm creating a row of thumbnails for a portfolio section w/titles at [[LINK href="http://lucaswynne.com/category/portfolio/"]][[/LINK]]. I'm having the age old problem of my right margin knocking the next image down when I would like it to be flush. <strong>I want to hide the extra margin and bring the next image up using the overflow property, I do not want to alter the width of my page.</strong>

Here is the CSS for the thumbnails
div.img
{
margin:0 20px 20px 0;
border:0px solid #0000ff;
height:auto;
width:auto;
float:left;
overflow:hidden!important;
}
div.img img
{
display:inline;
margin:0px;
border:0px solid #ffffff;
width:216px;
height:115px;
overflow:hidden!important;
}
div.img a:hover img
{
border:0px solid #0000ff;
overflow:hidden!important;
}
div.desc
{
text-align:left;
font-weight:normal;
width:auto;
overflow:hidden!important;
}
div.title
{
text-align:left;
font-weight:normal;
width:auto;
overflow:hidden!important;
}

Here is how I'm fetching the images:
<div class="img" style="overflow:hidden!important">
<a href="<?php the_permalink() ?>">

<?php $image = catch_that_image();
if( $image ) { ?>
<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>, <?php comments_number('No comments','One comment','% comments'); ?>" />
<?php } ?>

</a>

<div class="title">Portfolio Title</div>
<div class="desc">Add a description of the image here</div>

</div>
<?php endwhile; ?>



And here is the page CSS;
#portfolio_content { padding:20px 0; margin:0 20px 0 20px; border-top:1px solid #CCC; overflow:hidden!important }
#portfolio_content p { margin:0px 0 0 0 }
#portfolio_content ul { list-style:none }

Answers (1)

2010-12-18

Andrzej answers:

can you pls post a link to the website? - it would be much easier to debug

---

Lucas Wynne comments:

[[LINK href="http://lucaswynne.com/category/portfolio/"]][[/LINK]]

---

Lucas Wynne comments:

http://lucaswynne.com/category/portfolio/

---

Andrzej comments:

Rather than playing with overflow, I'd do it like this:
#portfolio_content {margin: 0 0 0 20px;}

---

Lucas Wynne comments:

I specifically want to do it with overflow, sorry. I understand margins, padding, etc. and that it's possible to do it that way.

---

Andrzej comments:

then, add a child [div] inside [div id="portfolio_content"], and set it a width of 980px;

Like this: [[LINK href="http://nbm.im/20101218-u7y-37kb.jpg"]]screenshot[[/LINK]]

---

Lucas Wynne comments:

And $4 for you!