SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 divs side-by-side in content of equal height

    I've seen all of the 2 and 3 column designs and those are cool and all but what if I have 2 divs that need to be in the middle content area and they need to have the same height border even though say the content in the left/right div may not be as much as the other div? Is this easily acheived? ...any examples would be greatly appreciated.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrap them in a container <div> and set the height to a specific size. Also set the overflow to auto in case the content ends up taking up more space than you wanted.

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Wrap them in a container <div> and set the height to a specific size. Also set the overflow to auto in case the content ends up taking up more space than you wanted.
    That won't work if the content of one is longer than the specified height.

    Google "faux columns" for a technique using background images to spoof equal height.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want separate columns with their own borders and backgrounds then you can use negative margins to good effect.

    http://www.pmob.co.uk/temp/2colequalisingseparate3.htm

    (note the js in the example has notting to do with the technique and is just to show what happens when the other column is longest.)

    The faux columns is the easiest method but my method also works with fluid widths unlike the faux columns which need a fixed width in most cases.

    There are other methods as pointed aout above (all with theitr own little problems).

    e.g.
    http://www.positioniseverything.net/...ut/equalheight

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Nice demo Ben

  6. #6
    Cha, Cha, Cha!!! Gamermk's Avatar
    Join Date
    Aug 2005
    Posts
    604
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    Mouse over body, click on body (Sorry, FF NS Moz OP only)
    demo 100% width , fixed width, 3 column, 2 column left right
    This gives me seizures. The idea is interesting, but may I suggest you do this through the user clicking. In its current setting its incredibly invansive and annoying.
    People don't read ads. They read what interests them,
    and sometimes that happens to be an ad.
    TrulyBored.com | TankingTips.com

  7. #7
    Cha, Cha, Cha!!! Gamermk's Avatar
    Join Date
    Aug 2005
    Posts
    604
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    it's just a demo to show the 1 2 3 columns
    A demo can skip on content, but not on usability.
    People don't read ads. They read what interests them,
    and sometimes that happens to be an ad.
    TrulyBored.com | TankingTips.com

  8. #8
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Minnesota
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow...thanks for all of your input. I did a considerable amount of reading and I came up with a solution thanks to all of your input. Again, thanks for pointing me in the right direction.


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
  •