SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I get the height the same for all uneven thumbnail divs so they wrap evenly?

    I'm making a simple gallery of thumbnail images that works across varable screen sizes (mostly for mobile and tablets). I use a couple of @media queries to adjust the images large for larger screen sizes. The thumbnails have this pattern:

    Code:
    <div class="tile">
        <a href="filename.htm">
        <img src="../../../thumbs/filename.png" alt="Name"/><br /><label class="title">Name</label></a>
    </div>
    The problem occurs when the label under the thumbnail wraps to two lines. If all the thumb captions are on one line, then they float all the way left evenly. If a label wraps to two lines, then the next line buts against that div because it sticks out, leaving the left-most space blank and unsightly.

    I thought I would need to use the display: property on the tile div, but after trying 9 different display properties, such as display:table-cell, the problem persists.

    How do I get the height the same for all divs so they'll wrap evenly? I don't want to change the caption lengths. I don't want to set the height because it needs to work whether the label is 1, 2, or 3 lines across several screen sizes.
    Steve Husting

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    First thought you could wrap each column In a div and give it the fixed height. If you know it won't go more than three lines say give it that height. Although I'm sure there is some display table elegant solution

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There are no rows or columns, just divs that float left. Wider screens will mean more divs in a row.

    I went ahead and set the height of the "tile" container div to larger than the image and able to accompany three lines of text.

    Any other solutions out there?
    Steve Husting

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Instead of floating the boxes, use display: inline-block instead. That way, the boxes will line up evenly and not snag on each other. Also set them to vertical-align: top;

    That's the wrong place to be using a label element, by the way. If you want a caption, you may as well go for the new fig caption element.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So my problem was using float AND display. Display:inline-block did not work earlier.

    The label element is carry-over code that I am updating. I'll look up fig caption and see what it does.

    Thanks for helping!
    Steve Husting

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by StevenHu View Post
    So my problem was using float AND display. Display:inline-block did not work earlier.

    The label element is carry-over code that I am updating. I'll look up fig caption and see what it does.

    Thanks for helping!
    If you use "float" then "display" is ignored (unless it is display:none) and the value computes to block. Therefore if you say float and inline-block then inline-block is ignored. You need to remove the float. On the other hand if you use position:absolute then float is ignored.

    You can read up on the exact rules of what wins out here.

    Here are some old examples of inline-block and captions:

    http://www.pmob.co.uk/temp/caption-151.htm
    http://www.pmob.co.uk/temp/caption152.htm

    You can lose the old ie7 and mozilla hacks these days if you don't support those browsers.


Bookmarks

Posting Permissions

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