how is container determined

#1

supposing I have:

in <head>:

<style type="text/css">
#page {margin: 0.5em 1em;}
#header, #middle, #footer {width: 100%;}
#header, #footer {text-align: center;}
#navbar {width: 119px; font-size: smaller;}
#main {position: absolute; left: 120px; top: 0px;}
</style>

<body>
<div id="page">
<div id="header">
</div>
<div id="middle">
<div id="navigation">
</div>
<div id="main">
</div>
</div> 
<div id="footer">
</div>
</div> 
</body>

which is the container for #main?

a) #middle, b) #page, c) body

I ask because I expect #middle to be the container for #navigation and
#main, and the three divs #header, #main and #footer to follow each
other vertically on the page, so positioning the top of #main at 0px
absolute should position it inside the containing #middle, and hence
level with the top of #navigation, but instead that seems to position
it at the top of the page.

Denis McMahon

#2

Quote:

which is the container for #main?

The initial containing block, i.e. the viewport of the browser:
<http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>.

Quote:

I ask because I expect #middle to be the container for #navigation and
#main, and the three divs #header, #main and #footer to follow each
other vertically on the page, so positioning the top of #main at 0px
absolute should position it inside the containing #middle, and hence
level with the top of #navigation, but instead that seems to position
it at the top of the page.

Put a position: relative in the parent element. Absolute elements are
positioned from the nearest absolute, static, or fixed ancestor.

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

#3

In article
<81bcab03-c97e-4d96-9926-8aad733fa5d1 (AT) v36g2000yqv (DOT) googlegroups.com>,
Denis McMahon <denis.m.f.mcmahon (AT) googlemail (DOT) com> wrote:

Quote:

supposing I have:

body
div id="page"
div id="header"
/div
div id="middle"
div id="navigation"
/div
div id="main"
/div
/div> <!-- middle --
div id="footer"
/div
/div> <!-- page --
/body

which is the container for #main?

#middle

-----
BODY is the container for #page. #page is its child.

#page is the container for #header, #middle, #footer. It is their parent
and they are its children; these latter are also BODY's grandchildren.

#middle is the container for #navigation, #main. It is their parent and
they are its children: these latter are also #page's grandchildren, and
BODY's great grandchildren.
------

Quote:

I ask because I expect #middle to be the container for #navigation and
#main, and the three divs #header, #main and #footer to follow each
other vertically on the page, so positioning the top of #main at 0px
absolute should position it inside the containing #middle, and hence
level with the top of #navigation, but instead that seems to position
it at the top of the page.

This trouble you are having is because absolute positioning takes
elements out of the normal flow. I snipped your CSS because it raises
these other issues which I am not addressing here.

--
dorayme

#4

On 2009-07-28, Joshua Cranmer <Pidgeot18 (AT) verizon (DOT) invalid> wrote:

Quote:

which is the container for #main?

The initial containing block, i.e. the viewport of the browser:
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details>.

I ask because I expect #middle to be the container for #navigation and
#main, and the three divs #header, #main and #footer to follow each
other vertically on the page, so positioning the top of #main at 0px
absolute should position it inside the containing #middle, and hence
level with the top of #navigation, but instead that seems to position
it at the top of the page.

Put a position: relative in the parent element. Absolute elements are
positioned from the nearest absolute, static, or fixed ancestor.

You mean the nearest absolute, relative or fixed ancestor. In other
words, the nearest ancestor that _isn't_ static.

#5

Ben C wrote:

Quote:

On 2009-07-28, Joshua Cranmer <Pidgeot18 (AT) verizon (DOT) invalid> wrote:
Put a position: relative in the parent element. Absolute elements are
positioned from the nearest absolute, static, or fixed ancestor.

You mean the nearest absolute, relative or fixed ancestor. In other
words, the nearest ancestor that _isn't_ static.

Dammit, I erased static twice just to put relative in and I still
mistyped it as static?

--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

#6

On Wed, 29 Jul 2009 17:26:47 -0400, Joshua Cranmer wrote:

Quote:

Ben C wrote:
On 2009-07-28, Joshua Cranmer wrote:
Put a position: relative in the parent element. Absolute elements are
positioned from the nearest absolute, static, or fixed ancestor.

You mean the nearest absolute, relative or fixed ancestor. In other
words, the nearest ancestor that _isn't_ static.

Dammit, I erased static twice just to put relative in and I still
mistyped it as static?

Another tragic sufferer of static cling.
;-)

--
John
Dontcha *hate* when that happens?

#7

John Hosking wrote:

Quote:

On Wed, 29 Jul 2009 17:26:47 -0400, Joshua Cranmer wrote:

Ben C wrote:
On 2009-07-28, Joshua Cranmer wrote:
Put a position: relative in the parent element. Absolute elements are
positioned from the nearest absolute, static, or fixed ancestor.
You mean the nearest absolute, relative or fixed ancestor. In other
words, the nearest ancestor that _isn't_ static.
Dammit, I erased static twice just to put relative in and I still
mistyped it as static?

Another tragic sufferer of static cling.

Is there a Best of Usenet newsgroup I can forward this to?

#8

On 30 July, 17:07, Harlan Messinger
<hmessinger.removet... (AT) comcast (DOT) net> wrote:

Quote:

Is there a Best of Usenet newsgroup I can forward this to?

Yes. alt.humor.best-of-usenet (or something like that)

#9

On Thu, 30 Jul 2009 12:07:26 -0400, Harlan Messinger wrote:

Quote:

John Hosking wrote:
On Wed, 29 Jul 2009 17:26:47 -0400, Joshua Cranmer wrote:

Ben C wrote:
On 2009-07-28, Joshua Cranmer wrote:
Put a position: relative in the parent element. Absolute elements are
positioned from the nearest absolute, static, or fixed ancestor.
You mean the nearest absolute, relative or fixed ancestor. In other
words, the nearest ancestor that _isn't_ static.
Dammit, I erased static twice just to put relative in and I still
mistyped it as static?

Another tragic sufferer of static cling.

Is there a Best of Usenet newsgroup I can forward this to?

<*blushes*>

Thanks, Harlan, but don't bother; I sent it in myself and they sent it
back. My submission didn't suit their needs at the present time, etc.

--
John
If only I knew one-tenth as much about CSS as I do about being funny.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

how is container determined

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

how is container determined - 07-28-2009 , 06:53 PM

Re: how is container determined - 07-28-2009 , 07:33 PM

Re: how is container determined - 07-28-2009 , 07:52 PM

Re: how is container determined - 07-29-2009 , 02:49 AM

Re: how is container determined - 07-29-2009 , 05:26 PM

Re: how is container determined - 07-29-2009 , 09:08 PM

Re: how is container determined - 07-30-2009 , 12:07 PM

Re: how is container determined - 07-30-2009 , 12:40 PM

Re: how is container determined - 07-30-2009 , 11:22 PM