Float problem: Creating list of thumbnails with background color

[dhimoet]

Hi all,

On http://www.dhimoet.com/photography/videos/ I want the thumbnails to be inside the big gray box. Because display:float is applied to the correspondent div tags, the thumbnails separate themselves from the parent container.

The div structure is like this:

<div class="thumbnails-wrapper">
  some stuff with gray background

  <div class="thumbnails-container">
    one thumbnail with left float
  </div>

  <div class="thumbnails-container">
    another thumbnail with left float
  </div>

</div> 

I also tried to use the display:inline instead of float:left and it did not work well. Screenshot is provided below.

Please help me find the solution. Thanks!

Dhimoet

[rtrethewey]

You could adjust the height setting of the "thumbnails-wrapper" <div>. "float" removes the element from the normal document flow, so the parent containing <div> won't automatically expand vertically to encompass them. Good luck!

[dhimoet]

Hi rtrethewey,

Adjusting the height of the div would make it static, right? Is there a way to make the height automatically adjusted? The height of one row of thumbnails is different with the height of two or more rows of thumbnails.

Thank you for your input.

Dhimoet

[rtrethewey]

No, the height setting just sets an explicit size for the div. As I say, 'float' removes the element from the normal document flow, so the parent containing element does not adjust for its presence automatically. The only way to adjust the height automatically would be through JavaScript or by pre-processing the page with a server-side script (ie. PHP, Perl, Ruby) which could iterate through all of the images to locate the tallestone and set the height of the div as the HTML is sent to the user. Good luck!

[dhimoet]

Thank you again rtrethewey. I guess I will consider using PHP or JavaScript for this part.

[coothead]

Hi there dhimoet,

instead of this...

.thumbnails-wrapper {
  width:                100%;
  min-height:           10px;
  margin:               auto;
  background-color:     #5a5a5a;
}

...try this modification...

.thumbnails-wrapper {
  background-color:     #5a5a5a;
  overflow:             hidden;
}

coothead