SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem lining up floated images

    I've got an index of images that I am trying to line up in neat rows, but I am running into some issues.

    The page is here: Game of Thrones: Characters

    The relevant CSS is:

    Code:
    div.CharIndex {
    border:medium solid #D89441;
    float:left;
    margin:2px 2px 30px 2px;
    text-align:center;
    width:150px;
    }
    
    div.CharIndexImage {
    height:84px;
    text-align:center;
    width:150px;
    }
    
    div.CharIndexText {
    background:url(http://www.westeros.org/Graphics/bg_enamel-gold.png);
    font-size:14px;
    text-align:center;
    text-transform:uppercase;
    width:150px;
    }
    In those cases where the name ends up taking up two lines, it ends up leaving no image immediately below that name. How can I fix that? Is it more of a margin it needs, or something else?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Following the advice on this page:

    Inline-block Gallery | Layouts | HTML & CSS Workshop | Gary Turner Web Development

    you could replace float: left on .CharIndex to display: inline-block;

    Do note the necessary tweak for older IEs, if that matters to you.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    520
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, thank you, that works much better!


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
  •