Re: [css-d] teaching float v. absolute positioning
Jared Stein wrote:
Hey all, I teach web design and dev courses at the college level and often
steer students away from absolute positioning as a first-choice CSS layout
solution in favor of float.
I've read John Faulds' post on the pitfalls of abs pos here
http://csscreator.com/node/11291 and use this as a summary of the
discussion for my students.
Do any of you know of other hearty debates on the matter that would
illuminate students who will likely enter the professional web design/dev
field? Other opinions not covered in the CSSCreator thread?
--
Jared M. Stein
Director of Instructional Design Services
Utah Valley University
I would think it is wise to explain the difference between the
'initial containing block' and 'containing block'. The initial
containing block is established by the viewport [1].
The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin; it is
the page area for paged media. The 'direction' property of the initial
containing block is the same as for the root element.
So absolutely positioned elements are offset (left, right, top and
bottom) from this initial containing block (viewport) unless it has an
ancestor with position relative, absolute or fixed [1].
If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' of 'absolute',
'relative' or 'fixed.
If no offset is given, then the offset is treated as 'auto'.
Absolutely positioned elements with offset 'auto' are positioned in
respect to the direction of overflow. The default 'rtl' (bidirection)
allows content to overflow the viewport to the right and bottom. For
'ltr' the horizontal overflow works in reversed. Below are some test
cases. Note how the body has a background of white and the html has a
background of blue.
http://css-class.com/test/css/bidi/visible-overflow-containing-block-ltr-ap-left.htm
Things that are not mentioned in the CSSCreator Thread are the
position of absolutely elements with offset of auto when interacting
with inline elements [2] or floats [3]. Another is the use of absolute
positioning for 'source ordering'. A simple construction is this.
body
div id=content .. /div
div id=navigation .. /div
body
body {
margin: 0;
}
#content {
margin-top: 100px;
}
#navigation {
position: absolute;
top: 0;
height: 100px;
width: 100%;
}
1. http://www.w3.org/TR/CSS21/visudet.html#containing-block-details
2. http://css-class.com/test/bugs/ie/calculated-offset-bug1.htm
3. http://css-class.com/test/bugs/ie/calculated-offset-bug2.htm
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] teaching float v. absolute positioning
Alan Gresley wrote: So absolutely positioned elements are offset (left, right, top and bottom) from this initial containing block (viewport) unless it has an ancestor with position relative, absolute or fixed [1]. If it refers back to this initial containing block (viewport), as one would expect from the normal rules of English grammar, then I'm not clear how it can have an ancestor. Philip Taylor __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] teaching float v. absolute positioning
On Tuesday, March 30, 2010 7:27:36 am CEO, Raynham Villas wrote: Alan Gresley wrote: So absolutely positioned elements are offset (left, right, top and bottom) from this initial containing block (viewport) unless it has an ancestor with position relative, absolute or fixed [1]. If it refers back to this initial containing block (viewport), as one would expect from the normal rules of English grammar, then I'm not clear how it can have an ancestor. Mmm. I believe he meant they to refer back to the elements. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] teaching float v. absolute positioning
Tim Climis wrote: Mmm. I believe he meant they to refer back to the elements. Well, that's certainly one possible interpretation : perhaps Alan will clarify. ** Phil. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] teaching float v. absolute positioning
Hey all, I teach web design and dev courses at the college level and often steer students away from absolute positioning as a first-choice CSS layout solution in favor of float. I've read John Faulds' post on the pitfalls of abs pos here http://csscreator.com/node/11291 and use this as a summary of the discussion for my students. Do any of you know of other hearty debates on the matter that would illuminate students who will likely enter the professional web design/dev field? Other opinions not covered in the CSSCreator thread? -- Jared M. Stein Director of Instructional Design Services Utah Valley University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
