www.webdeveloper.com
Results 1 to 7 of 7

Thread: Expand elements to another element's size?

  1. #1
    Join Date
    May 2009
    Posts
    21

    Expand elements to another element's size?

    I have two elements positioned exactly on top of each other. They have the same width, but not the same height. How can I make sure the shorter one expand to fit exactly overtop of the other?

    I put this here because I wasn't sure if I would need HTML or JavaScript.

  2. #2
    Join Date
    Jun 2009
    Posts
    27
    For the sake of simplicity, I'll assume elements=divs. Do you want div1 to overlap div2? If so, you're going to have to find out the position and height of div2 in order to tell div1 it's new height.

    If I may ask, what's your desired end result? Also, it would help to see some code to represent what you think ought to happen.

  3. #3
    Join Date
    Jun 2009
    Posts
    111
    You can do it with absolute positioning, but IE won't like it. This is a very common annoyance (the fact that doing this isn't possible, if you have an indefinitely-expanding outer element).

    This article says how to "fake it" with a background image, but it may not apply to your situation: http://www.alistapart.com/articles/fauxcolumns/

    The non-IE version with absolute positioning would go something like this:
    Code:
    <div id="div1">
    <div id="div2">
    this inner div will overlay the outer one
    </div>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    this is some content to expand the outer div<br>
    </div>
    And the CSS...
    Code:
    #div1 {
    position: relative;
    background: #ccc;
    width: 200px;
    }
    #div2 {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    }
    If you don't need to support IE, this method will work fine.

    EDIT: Oh and of course you could do it with JavaScript, but it's kind of messy... and would break if text were resized or any of the contents changed.

  4. #4
    Join Date
    May 2009
    Posts
    21
    Quote Originally Posted by sommardahl View Post
    For the sake of simplicity, I'll assume elements=divs. Do you want div1 to overlap div2? If so, you're going to have to find out the position and height of div2 in order to tell div1 it's new height.

    If I may ask, what's your desired end result? Also, it would help to see some code to represent what you think ought to happen.
    I want the height of div1 to be exactly the same as div2, regardless of if it changes.
    What I'm doing is making something like tabs. Two divs exactly on top of each other with little tabs coming off, but when you click the tab, it moves in front. I want them to be the same height so you can't see any of the tab behind it. when the smaller one is in front. They don't have a static height - in fact, both of them will be constantly changing.
    HTML Code:
    <div id="div1">
    Div with variable size.
    </div>
    
    <div id="div2">
    Div<br>
    with<br>
    variable<br>
    size<br>
    but for<br>
    sake of<br>
    example,<br>
    let's make it<br>
    the biggest.
    </div>

  5. #5
    Join Date
    Jun 2009
    Posts
    111
    Here are your options, then:

    Fixed height
    Z-index and visibility (would basically hide the div in the back)
    Javascript to get heights and apply fixed heights to smaller divs

    Personally I would go with a fixed height... make it tall enough that content *probably* won't extend beyond it, and set overflow to auto so that it doesn't screw up when content does extend too far.

    EDIT: Oh and of course you could just display only the DIV in the front. Would change the overall size when you switched in between them but you wouldn't be able to see anything behind what you selected.

  6. #6
    Join Date
    May 2009
    Posts
    21
    Quote Originally Posted by Four Staples View Post
    Z-index and visibility (would basically hide the div in the back)
    How would I go about doing this?

  7. #7
    Join Date
    Jun 2009
    Posts
    111
    Quote Originally Posted by Blackberry755 View Post
    How would I go about doing this?
    Basically, use Javascript to set the Z-index of the one you want on top to 2 with visibility: visible, and set all the others to z-index 1 with visibility: hidden.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles