ansaurus

Question

Position a Div to appear below another DIV

Answer 1

A:

Just a guess, but have you tried adding the style clear: both to the second div? I doubt it will help, but it might.

You can also try adding a top margin for the second div that is equal to the height of the first div. Basically, something like:

<div id="second-div" style="padding-top: 40px">

Where 40px is the height of the first div. The issue there is that you'd need to know what the height of the first div is and if it is variable then this approach will not help.

Brian Hasden 2009-12-15 18:03:47

thanks for the reply it did not work though. The second-div appears further down but on top of first-div which also moves along with it to the bottom.

fireBand 2009-12-15 21:17:10

Did you try increasing the top padding from 40px. Also, make sure the top padding is on the second div and not on the wrapper/main div.

Brian Hasden 2009-12-15 21:30:12

I combined both the solutions but still only half of the "wrapper-div" is visible. I found the problem though. The "wrapper" div does expand but upwards crossing borders of "main-div". I think since the position is absolute it acts independent to "main-div"'s position. Since the "main-div" does not expand accordingly only half of the "wrapper" div can be visible.I have edited my post with new elements.

fireBand 2009-12-15 22:39:28

Answer 2

+4 A:

I think the solution entails doing the following. Have a wrapper div:

<div id="my_wrapper">
  content
</div>

Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.

<div id="my_wrapper">
  <div id="visible_item">Item</div>
  <div id="may_become_visible">Not Visible Now Item</div>
</div>

Then you can show/hide as necessary and position the inside content correctly.

Michael 2009-12-15 18:12:13

This is a good idea. I'd suggest he try this first.

Brian Hasden 2009-12-15 18:17:35

I tried this solution but dint work out. The "wrapper" div needs to expand for the invisible div which contains form element. But because of its absolute position the textarea inside the form expand upwards and only half visible. I need to position the first-div at the bottom left corner of the main-div(when the second-div is hidden)and second-div should appear at the bottom of the first-div. Is this posible with relative positioning?

fireBand 2009-12-15 21:14:57

Don't set a specific height to the outer div, just let it adjust to the height as necessary per content.

Michael 2009-12-16 01:53:12

Answer 3

A:

Ok, with you updated question I believe I've created what you're looking for with the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<body>
    <style>
     HTML
     {
      margin: 0px;
      padding: 0px;
      height: 100%;
     }

     BODY
     {
      margin: 0px;
      padding: 0px;
      height: 100%;
     }

     div.first-div
     {
      width: inherit;
      float: left;
      bottom: 60px;
      position: absolute;
      padding: 0 0 0 0;
      overflow: auto;
     }

     div.second-div
     {
      display: none;
      position: absolute;
      float: left;
      bottom: 0px;
     }
     div.main-div
     {    
      background:{colour} url({image}) no-repeat 0  100%;
      width:557px;
      min-height:61px;
      position:relative;
      float: left;
      height: 100%;
     }
    </style>
    <div class="main-div">
     <div id="firDiv" class="first-div">
      <a href="#" onClick="document.getElementById('secDiv').style.display='block';"><span>my link</span></a>
      //this is absolute positioned
     </div>
     <div id="secDiv" class="second-div">
      //this only appears after clicking on a link
      <form>
       <textarea></textarea>
      </form>
     </div>
     this is my content
    </div>
</body>
</html>

Now, what this does is absolute position both the first and second divs at the bottom of the page, positioned so that they don't overlap each other. If you don't like the fact that the first div is up so high from the bottom of the page, you can modify the first-div style as such:

div.first-div
{
 width: inherit;
 float: left;
 bottom: 20px;
 position: absolute;
 padding: 0 0 0 0;
 overflow: auto;
}

and then update the link to

<a href="#" onClick="document.getElementById('secDiv').style.display='block';document.getElementById('firDiv').style.bottom='60px';"><span>my link</span></a>

Basically, what you're doing there is changing the first div to be closer to the bottom of the page but then moving it when the link is clicked so that there's more room for the second div.

It's not solving the underlying issue of displaying a relative positioned div under an absolutely positioned div, but hopefully is resolves your specific problem.

Brian Hasden 2009-12-15 23:31:13

ansaurus

tags:

views:

answers:

Position a Div to appear below another DIV

related questions