Float problem: Creating list of thumbnails with background color
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>
I also tried to use the display:inline instead of float:left and it did not work well. Screenshot is provided below.
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!
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.