Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Absolute Positioning (CSS Question)

Reply
Thread Tools

Absolute Positioning (CSS Question)

 
 
Matt Beckwith
Guest
Posts: n/a
 
      07-18-2003
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


 
Reply With Quote
 
 
 
 
William Tasso
Guest
Posts: n/a
 
      07-18-2003
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


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      07-18-2003

"Matt Beckwith" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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.


 
Reply With Quote
 
Jacqui or (maybe) Pete
Guest
Posts: n/a
 
      07-18-2003
In article <(E-Mail Removed)>, http://www.velocityreviews.com/forums/(E-Mail Removed)
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'

....
 
Reply With Quote
 
DU
Guest
Posts: n/a
 
      07-18-2003
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/doctorunc...sitioning.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/doctorunc...MSIE6Bugs.html

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Master Pages & relative/absolute positioning? Fred Nelson ASP .Net 1 02-21-2006 12:51 PM
absolute, relative, not set, static positioning ?????? Rob R. Ainscough ASP .Net 2 02-07-2006 07:32 PM
asp.net multi-page printing & absolute positioning John A Grandy ASP .Net 0 11-17-2004 05:22 AM
Convert absolute positioning to relative? Vernon Compton HTML 10 03-02-2004 09:46 AM
absolute positioning and frames Jules HTML 6 11-07-2003 07:39 AM



Advertisments