473,708 Members | 2,455 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Reason behind containing block rule

If you wrap one division around another like this:

<div id="wrapper">
<div id="child">... </div>
</div>

....the wrapper division will be considered the containing block of the child
division in all cases except where
1. the positioning of the wrapper is static and
2. the positioning of the child is absolute.

OK. So why? Why is that one case an exception? Surely the CSS standards
committee had a reason behind this. Surely they weren't just being
capricious. Were they drunk?

Sep 5 '06 #1
26 2037
"Bill Norton" <bn*****@austin .rr.comwrote:
>If you wrap one division around another like this:

<div id="wrapper">
<div id="child">... </div>
</div>

...the wrapper division will be considered the containing block of the child
division in all cases except where
1. the positioning of the wrapper is static and
2. the positioning of the child is absolute.

OK. So why? Why is that one case an exception? Surely the CSS standards
committee had a reason behind this. Surely they weren't just being
capricious. Were they drunk?
I'm not sure what you are asking.

In the absolute positioning model an absolutely positioned element is
positioned with respect to the nearest ancestor whose position property
has been set to anything other than the (default) value of static.

Absolutely positioned elements are taken out of the flow completely, it
would make no sense to always position them in respect to their parent
element. As defined we can choose which ancestor element acts as the
containing block which results in a usable scheme.

Does that answer your question?

--
Spartanicus
Sep 5 '06 #2

"Spartanicu s" <in*****@invali d.invalidwrote in message
news:c1******** *************** *********@4ax.c om...
In the absolute positioning model an absolutely positioned element is
positioned with respect to the nearest ancestor whose position property
has been set to anything other than the (default) value of static.
Right. That's how it's defined. The question really had to do with *why* it
was defined that way.
Absolutely positioned elements are taken out of the flow completely, it
would make no sense to always position them in respect to their parent
element. As defined we can choose which ancestor element acts as the
containing block which results in a usable scheme.
OK. But I'm having a hard time imagining a case where I would want to
position an element outside of its parent. And anyway if the idea is to give
me a choice as to which block I want to position something, then why not let
me be completely specific about it with, say, a container-block property
like this:

#divX {position: absolute; left: 0px; top: 0px; container-block:
divWhatever}

Sep 5 '06 #3
"Bill Norton" <bn*****@austin .rr.comwrote:
>Absolutely positioned elements are taken out of the flow completely, it
would make no sense to always position them in respect to their parent
element. As defined we can choose which ancestor element acts as the
containing block which results in a usable scheme.

OK. But I'm having a hard time imagining a case where I would want to
position an element outside of its parent.
Use what you need, leave the bits that you don't. I see no justification
for criticizing CSS for offering more options than you personally need.

--
Spartanicus
Sep 5 '06 #4
"Spartanicu s" wrote
Use what you need, leave the bits that you don't. I see no justification
for criticizing CSS for offering more options than you personally need.
In application development we call this "feature bloat" and it's a thing to
be avoided. One should never add functionality just because you can. You
need to understand the users needs and build around that.

I wonder how many man hours have been wasted around the world by web
developers who have run into this "feature" and tried to figure out what was
going on.

I wonder what the ratio is of the number of times someone has actually taken
advantage of this "feature" vs. the number of times someone has had to work
around it by giving a parent block a token "position: relative" with no
offsets.

Sep 5 '06 #5
"Bill Norton" <bn*****@austin .rr.comwrote:
>Use what you need, leave the bits that you don't. I see no justification
for criticizing CSS for offering more options than you personally need.

In application development we call this "feature bloat" and it's a thing to
be avoided.
Again: just because you don't have a use for something doesn't mean that
there is no use for it.
>I wonder what the ratio is of the number of times someone has actually taken
advantage of this "feature" vs. the number of times someone has had to work
around it by giving a parent block a token "position: relative" with no
offsets.
Absolute positioning as a whole is not understood well by many. I've
been a regular in this group since about 1998, during that time this
particular aspect of it hasn't featured as being a problem of any
significance.

--
Spartanicus
Sep 5 '06 #6

"Spartanicu s" wrote
Absolute positioning as a whole is not understood well by many. I've
been a regular in this group since about 1998, during that time this
particular aspect of it hasn't featured as being a problem of any
significance.
Indeed this may not be one of CSS's biggest problems - there are, after all,
so many to choose from :-) Still a quick Googel of this group on
'"containing block" absolute' came up with 95 hits. Of course not all were
relevant to the issue at hand but many were. Here are a couple of other
folk's comments on this "rule".

From Harlan Messinger (after having the problem explained to him)
"I see. The problem is that it didn't occur to me to look for a definition
for something that looked like perfectly clear English as it was. :-)
"Containing block" looks pretty unambiguous to me!

Now that I know this (rule), it strikes me as *extremely* unfortunate. "

From Gert Brinkmann
"Thank you very much for your answer. It's unbelievable, but it is true.
This
is the way, firefox behaves (I did not check other browsers). Hmm, does
this behaviour make sense? "

At this point - given what I understand about it - I have to see it as
another unfortunate decision on the part of W3C.
Sep 6 '06 #7
Bill Norton wrote:
If you wrap one division around another like this:

<div id="wrapper">
<div id="child">... </div>
</div>

...the wrapper division will be considered the containing block of the child
division in all cases except where
1. the positioning of the wrapper is static and
2. the positioning of the child is absolute.

OK. So why? Why is that one case an exception? Surely the CSS standards
committee had a reason behind this. Surely they weren't just being
capricious. Were they drunk?
Consider the following reasoning of the "Containing Block" (which
determines the relative positioning) in the following two instances:

A Relative div takes positioning which is offset from the position it
would have taken in Static. Consider that the Abs div's (0,0) if inside
a Rel div without Positioning Properties is the top/left of the Rel div
(not offset and therefore the same as if Static).

Static is the only one which does not take positioning properties such
as top, left, right, bottom whether Static Block Model or Static Inline
Model and is always within the normal flow of the document. If Static
were not an exception then it would not only duplicate the Rel div
without Positioning, but also as far as the Abs' positioning is
concerned. They instead make the positioning relative to the "Viewport"
for the Abs div.

Hopefully I have been able to convey my understanding on this and how it
relates to your question.

--
Gus
Sep 6 '06 #8

Bill Norton wrote:
In application development we call this "feature bloat" and it's a thing to
be avoided.
CSS isn't an application, it's a standard protocol. Different ground
rules.

Sep 6 '06 #9
"Gus Richter" wrote
If Static were not an exception then it would not only duplicate the Rel
div without Positioning, but also as far as the Abs' positioning is
concerned. They instead make the positioning relative to the "Viewport"
for the Abs div.
Thanks, Gus. If I understand you correctly the reason behind the
"Static/Absolute exception" is because the W3C didn't want to duplicate the
functionality of a "Relative with no Positioning/Absolute" nesting.

Well, if that's the case, then I have to tell you - that seems so, I dunno,
so arbitrary, so capricious. Heck, maybe they were drunk.

It's not like there's not any other duplicate functionality in CSS. It's
everywhere, and so what? That's not necessarily a bad thing.

Now, as I have been thinking about it, I can certainly see the benefit of
being able to place something outside of its parent block, and if that's
what they were trying to do then fine, but what a weird way of doing it. Why
not just allow us to explicitly state which containing block we want to
place something in with something like the container-block property I
mentioned in an earlier post?

#divX {
position: absolute;
left: 0px;
top: 0px;
container-block: divWhatever}

Sep 6 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
2566
by: Andy Baker | last post by:
Hi there, I'm learning Python at the moment and trying to grok the thinking behind it's scoping and nesting rules. I was googling for nested functions and found this Guido quote: (http://www.python.org/search/hypermail/python-1993/0343.html) "This is because nested function definitions don't have access to the local variables of the surrounding block -- only to the globals of the
7
4684
by: Jeff Thies | last post by:
I'm trying to do a nav list using list items. Roughly this is putting links styled display: block and with a background color. In IE5 (windows, haven't tried Mac yet), adding the display: block for the link adds a bit of whitespace between the list items. NS7.1 does not do this. Why the whitespace (about 5px)? Is it possible to get IE and NS looking
3
5526
by: ad.von.reeken | last post by:
Hello CSS-ers, My question is: Is it possible to use CSS to prevent the 'Gecko-underline' behind 'anchored' images on pages with patterned background images? The page http://www.vonreeken.demon.nl/test/gifline1.htm shows, well if a 'Gecko' browser is used of course, that these browsers let the background of images inherit the text-decoration attribute of the containing anchor.
2
1972
by: Steven K | last post by:
Hello, I am trying to learn how to use Code Behind. Essentially, the example of Block 1 and Block 2 are the same. The difference is that in Block 1 I explicitly set the parameter value to "menu_help". When I open the menu.aspx page and Call LoadMenu(), the value from the variable "strMenu" will populate the html table. However, with Block 2, I am sending the value "menu_help" using Call LoadMenu("menu_help"). When I use the statement...
2
5185
by: Italian Pete | last post by:
Hi, I have a div control on an aspx page. I toggle the display property between 'block' and 'none' client side using the following javascript: function toggleDivOnOff(divID) { var x = document.getElementById(divID) x.style.display == 'block'? x.style.display='none' : x.style.display='block'; } In the code behind page, I want to use the value of the display property to
4
5623
by: drew197 | last post by:
I am a newbie. I am editing someone elses code to make it compatible with Firefox and Safari. In IE, when you click on the proper link, a block of text is shown in a nice paragraph form. But, in FireFox and Safari it appears as a narrow column of text with only 2-3 words per line. Here is the code: function showAll()
4
2716
by: ron | last post by:
I have a access based guest book. I want to create a validation rule to block certain words or parts of a srting. How do i do this? ie: this is a nice site. come visit my porn site at www.abc.zy If the message contains the word porn, can I block the whole message using a validation rule
14
3129
by: Haines Brown | last post by:
I know I'm missing something obvious. I need a short horizontal rule to preceed a line of text (in a bibliography in which the author is repeated). I tried this: <p> <div class="rule"></div>, Title of book ... </p> style:
0
2081
by: Francesco Pietra | last post by:
I forgot to add that the lines to strip are in present case of the type of the following block HETATM 7007 O WAT 446 27.622 34.356 55.205 1.00 0.00 O HETATM 7008 H1 WAT 446 27.436 34.037 56.145 1.00 0.00 H HETATM 7009 H2 WAT 446 27.049 33.827 54.563 1.00 0.00 H occurring in a 300MB file. In present case each three-lines block is followed by line renumbering (7007,
0
8788
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, weíll explore What is ONU, What Is Router, ONU & Routerís main usage, and What is the difference between ONU and Router. Letís take a closer look ! Part I. Meaning of...
0
8697
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9290
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9159
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9001
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6615
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Duprť who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4713
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3151
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2508
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.