www.webdeveloper.com
Results 1 to 6 of 6

Thread: Float problem: Creating list of thumbnails with background color

  1. #1
    Join Date
    Aug 2011
    Posts
    51

    Float problem: Creating list of thumbnails with background color

    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:
    PHP Code:
    <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
    Attached Images Attached Images
    Last edited by dhimoet; 11-24-2011 at 06:10 PM.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,108
    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!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2011
    Posts
    51
    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

  4. #4
    Join Date
    Mar 2011
    Posts
    1,108
    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!
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Aug 2011
    Posts
    51
    Thank you again rtrethewey. I guess I will consider using PHP or JavaScript for this part.

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,450
    Hi there dhimoet,

    instead of this...
    Code:
    
    .thumbnails-wrapper {
      width:                100%;
      min-height:           10px;
      margin:               auto;
      background-color:     #5a5a5a;
    }
    
    ...try this modification...
    Code:
    
    .thumbnails-wrapper {
      background-color:     #5a5a5a;
      overflow:             hidden;
    }
    
    coothead

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles