Another "position:absolute" question..

Discussion in 'CSS' started by Kerosene, Feb 14, 2007.

0
  1. #1
    I want Div1 to appear AFTER Div2 in my code, but BEFORE Div2 when displayed in a browser.

    The way I've got it working at the moment requires that Div1's "height:40px" matches Div2's "top:40px".

    I'd like Div1 to expand and shrink depending on content, and for Div2 to sit right under it - without having to set height and top values.

    Is it possible?

    <div align="center">
<div style="width:600px;">
<div style="width:600px; position:absolute; top:40px; left:50%; margin-left:-300px; height:40px; background-color:#CC0000">Div2 - Display second</div>
<div style="width:600px; position:absolute; top:0px; left:50%; margin-left:-300px; height:40px; background-color:#ff9900">Div1 - Display first</div>
</div>
</div>
    Code (markup):
     
    Kerosene, Feb 14, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2 
    
<div id="holder">
  <div id="div2">
    this will be under div1, with a fixed height of 40px
  </div>
  <div id="div1">
    this will be variable height, and will appear first
  </div>
</div>
============
#holder {
    position: relative;  /*required to give positional reference*/
    width: 100%;  /*or some other trigger required for IE to set hasLayout*/
    }

#div1 {
    margin-bottom: 40px;  /*creates space for AP div*/
    }

#div2 {
    position: absolute;
    bottom: 0;
    left: 0;  /*its the default, but IE must have explicit directions*/
    height: 40px;
    }
    Code (markup):
    When you have to do something like this, it raises the question, what can be the compelling reason for this unnatural act?

    cheers,

    gary
     
    kk5st, Feb 14, 2007 IP