www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Attaching a relative div to an absolute div?

  1. #1
    Join Date
    Jun 2004
    Posts
    91

    resolved [RESOLVED] Attaching a relative div to an absolute div?

    I have an absolute positioned div with a dynamic height. I need to place another div (not nested) directly underneath that. I've tried a variety of different things, most logical, but to no avail.

    The answer is probably stupidly obvious, but I can't see it staring me right in the face. Has anyone done this before?

  2. #2
    Join Date
    Mar 2006
    Posts
    227
    The problem with trying to position another div underneath an absolutely positioned div is that the absolutely positioned div is completely removed from the flow of the document and will sit in its absolute position either displaying under or over the other elements on the page depending on the order they sit in the code or the z-index assigned to positioned elements.

    By default, a div will expand to fill the width of its container, so the best solution for you might be to absolutely position a container div for your two divs, then simply place your first and second div inside. The second div will display below the first and both will take up 100% of the width of the container unless you adjust them otherwise.

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Put them both in a div positioned absolutely.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Jun 2004
    Posts
    91
    Quote Originally Posted by nataliemac
    The problem with trying to position another div underneath an absolutely positioned div is that the absolutely positioned div is completely removed from the flow of the document and will sit in its absolute position either displaying under or over the other elements on the page depending on the order they sit in the code or the z-index assigned to positioned elements.

    By default, a div will expand to fill the width of its container, so the best solution for you might be to absolutely position a container div for your two divs, then simply place your first and second div inside. The second div will display below the first and both will take up 100% of the width of the container unless you adjust them otherwise.
    The weird thing that was hanging me up is that if you specify 'top:200px,' it displays from the bottom of the last element, and the last element was also positioned absolute (which therefore should have been removed from the flow O_o).

    I got around this by changing the original div to relative, and tweaking the *margin-top* instead of just 'top.' Since the original div was relative, the second div slides properly into place underneath. Also, I didn't need to make any changes at all to the HTML markup which makes me happy .

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