Absolute Positioning (CSS Question)

[Matt Beckwith]

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.

 

[William Tasso]

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

have you considered {float:left;}

 

[rf]

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.

 

[Jacqui or (maybe) Pete]

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>

</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'

....

 

[DU]

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.

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