Absolute Positioning (CSS Question)

Discussion in 'HTML' started by Matt Beckwith, Jul 18, 2003.

  1. Steve Callihan's "Cascading Style Sheets By Example" states that absolute
    positioning "...specifies that an element is to be positioned relative to
    the containing block."

    Yet whenever I specify "position: absolute", the item gets positioned
    relative to the body, not the containing block.

    How can I use positioning relative to the containing block?

    What I want to do is position two things side-by-side:

    <div.left>
    </div>
    <div.right>
    <div.rightleft>
    </div>
    <div.rightright>
    </div>
    </div>

    I'm using the following CSS:

    div.rightleft {position: absolute; left: 0px}
    div.rightright {position: absolute; top: 0px}

    When I do this, everything in div.rightright goes to the top of the screen
    (rather than to the top of the div.right area), and div.rightleft goes to
    the left margin of the screen.

    Thanks in advance.

    --
    Matt Beckwith, M.D.
    http://drbeckwith.com
     
    Matt Beckwith, Jul 18, 2003
    #1
    1. Advertising

  2. Matt Beckwith wrote:
    >
    > What I want to do is position two things side-by-side:
    >


    have you considered {float:left;}

    --
    William Tasso - http://www.WilliamTasso.com
     
    William Tasso, Jul 18, 2003
    #2
    1. Advertising

  3. Matt Beckwith

    rf Guest

    "Matt Beckwith" <> wrote in message
    news:...
    > Steve Callihan's "Cascading Style Sheets By Example" states that absolute
    > positioning "...specifies that an element is to be positioned relative to
    > the containing block."
    >
    > Yet whenever I specify "position: absolute", the item gets positioned
    > relative to the body, not the containing block.
    >
    > How can I use positioning relative to the containing block?


    Like William said but also go over to the specifications and look up the
    definition of "containing block" (chapter 9).

    The containing block is the nearest parent block that does not have the
    default position: static; You will find (or not) that if you give the
    required parent position: relative; (without suggesting any offset) it will
    become a containing block and your absolute positioning will work as
    advertised.

    Cheers
    Richard.
     
    rf, Jul 18, 2003
    #3
  4. In article <>,
    says...
    > Steve Callihan's "Cascading Style Sheets By Example" states that absolute
    > positioning "...specifies that an element is to be positioned relative to
    > the containing block."


    The problem is that 'containing block' doesn't mean what you think it
    does - a 'containing block' is one which contains the element (in the
    normal sense of the word) and which is absolutely or relatively
    positioned.

    From the spec "The containing block for a positioned box is established
    by the nearest positioned ancestor (or, if none exists, the initial
    containing block"

    The key word there is 'positioned'.

    See: http://www.w3.org/TR/REC-CSS2/visuren.html#q29

    > Yet whenever I specify "position: absolute", the item gets positioned
    > relative to the body, not the containing block.


    Yep.

    > How can I use positioning relative to the containing block?


    Position the 'containing' block. A simple 'position:relative' will do
    it.

    > What I want to do is position two things side-by-side:
    >
    > <div.left>

    You mean <div class="left">
    > </div>
    > <div.right>

    ditto.
    ....
    >
    > div.rightleft {position: absolute; left: 0px}


    You probably (although not necessarily) also want to set 'top' and
    'width'

    > div.rightright {position: absolute; top: 0px}


    Do you mean 'right: 0px'? You probably also want to set 'top' and
    'width'

    ....
     
    Jacqui or (maybe) Pete, Jul 18, 2003
    #4
  5. Matt Beckwith

    DU Guest

    Matt Beckwith wrote:
    > Steve Callihan's "Cascading Style Sheets By Example" states that absolute
    > positioning "...specifies that an element is to be positioned relative to
    > the containing block."
    >
    > Yet whenever I specify "position: absolute", the item gets positioned
    > relative to the body, not the containing block.
    >
    > How can I use positioning relative to the containing block?
    >
    > What I want to do is position two things side-by-side:
    >
    > <div.left>
    > </div>
    > <div.right>
    > <div.rightleft>
    > </div>
    > <div.rightright>
    > </div>
    > </div>
    >
    > I'm using the following CSS:
    >
    > div.rightleft {position: absolute; left: 0px}
    > div.rightright {position: absolute; top: 0px}
    >
    > When I do this, everything in div.rightright goes to the top of the screen
    > (rather than to the top of the div.right area), and div.rightleft goes to
    > the left margin of the screen.
    >
    > Thanks in advance.
    >
    > --
    > Matt Beckwith, M.D.
    > http://drbeckwith.com
    >
    >



    I explain everything on this issue and provide interactive demo at this
    page:

    Interactive demo on CSS positioning:
    http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/Positioning.html

    "A positioned element should be positioned to the nearest containing
    *_positioned_* element, not the containing element."
    http://www.w3.org/TR/REC-CSS2/visuren.html#q29

    "The containing block for a positioned box is established by the nearest
    *_positioned_* ancestor (or, if none exists, the initial containing block)
    Absolutely positioned boxes are removed, taken out of the normal flow."

    and there are a few bugs regarding position:absolute in browsers. One of
    them is about percentage value on absolutely positioned element:

    http://www10.brinkster.com/doctorunclear/BrowserBugsSection/MSIE6Bugs/MSIE6Bugs.html

    DU
    --
    Javascript and Browser bugs:
    http://www10.brinkster.com/doctorunclear/
     
    DU, Jul 18, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chris
    Replies:
    10
    Views:
    1,117
    Chris
    Mar 1, 2004
  2. KatB
    Replies:
    8
    Views:
    4,230
  3. Chris
    Replies:
    5
    Views:
    564
    Travis Newbury
    Nov 20, 2005
  4. David Smithz
    Replies:
    5
    Views:
    713
    Jonathan N. Little
    May 22, 2006
  5. Replies:
    0
    Views:
    108
Loading...

Share This Page