SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertical Aligning Using a Grid System

    I'm guessing that vertical aligning probably crops up a lot on this here forum. It's definitely something that has caused me a lot of grief over the years! Anyway, basically what I've done is created a grid system of boxes using display:table, display:table-row and display: table-cell to create this grid. However, now I want to vertical align each box but am having some serious problems!

    You can see what I've done so far here: http://www.thgcreative.co.uk/comono/whats-on/

    Now, there are two things that I would ideally like to do and was wondering whether they would be possible. First off I want the black box at the bottom of each box to be aligned at the bottom of each box. I've actually tried doing this using position:absolute but for some reason couldn't get the clear div underneath it so that the box looked correct.

    However, this wouldn't really solve my problem as if this black box was at the bottom there would then be a big gap between the text and black box on some of the boxes. So, what I would really like is for the text in the middle to have a flexible height or flexible margins so that they would expand depending on the size of the box. Does that make sense? Would something like that be possible?

    Essentially I just want this page to look good so am open to suggestions from anyone.

    Thanks!
    Russ

  2. #2
    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)
    This is not a very good solution, but in lieu of something better, you could try something like

    Code:
    .what-top {min-height: 180px;}
    You could make the black box sit at the bottom in each div with

    Code:
    .what-main {
      vertical-align: bottom;
    }
    but that on its own would make the boxes uneven at the top, so not much good.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the suggestion Ralph. That is something I tried and which doesn't quite work, as well as yeah, making the tops uneven instead of the bottom. Does anyone else have a suggestion?


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
  •