Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Keep two adjacent divs the same height?

    See the two boxes on this page: http://offtone.com/v2/index.php

    I'd definately prefer them to be the same height as each other. Unfortunately, CSS is useless when it comes to dealing with pretty much anything on the vertical axis, so height settings of 100% are ignored.

    Very frustrating. However, I was hoping someone here maybe has a solution? Were it just two simple columns, I'd use the old background thing... But these are two seperate containers, with backgrounds of their own for effect and whatnot.

    Thanks for any suggestions,
    Aaron

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Right now I'm using JS to pull it off... I don't like JS... Guess if the JS fails, people will just see the uneven heights, which isn't really that bad.

  • #3
    New Coder
    Join Date
    Aug 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can manually set the height of each div to be identical.

    If you are going to do that and you will have variable sized content going into the divs you may also want to set up scrolling to occur in the div in case content exceeds the height.

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Scrolling isn't really an option, as the style on scrollbars is variable across operating systems and even browsers, and none of them would look good :P

    I think the JS solution will suffice for now, but would be nice to do it with CSS, as it shouldn't be javascript's job to do this.

    Thanks.

    Edit: The JS method's only downfall seems to be that using fixed heights on the container doesn't facilitate font scaling... Does in IE though, thanks to its weird interpretation of fixed heights as min-height.

    Actually, the solution may lie in that... Heh. I'll set min-height for !IE, and height for IE
    Last edited by AaronW; 10-20-2004 at 07:03 PM.

  • #5
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mozilla/Netscape is the only browser to support min-height (Safari 1.2 might, but seeing as how I don't have access to it, I cannot test it).

    I would suggest using background-images and floats seeing as how your columns are fixed width. If I want to use min-height, (for example, at http://www.customgardenbuilders.com/) I cheat, and add a 1px wide div.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well they ought to. I don't think I'll add another DIV to the markup like that, as the effect really isn't THAT bad if they're different heights. I'm sure those browsers will support min-height soon enough, and I'd like to think that the majority of non IE users are the type to keep up with browser versions (unless Safari comes installed on the Mac, but perhaps Mac users deserve more credit than Windows users :P)


  •  

    Posting Permissions

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