...

View Full Version : Understanding the Normal Flow of a document.



Collywobbles
05-16-2007, 12:13 PM
Hi all.

A lot of my problems seem to stem from not understanding in which order and how a browser will place an item.

The 'Normal Flow' of a document is, to my knowledge, to place each element directly below the previous one. This is easy to understand on a page with no formatting. It's when floats and formating are introduced that I can't follow whats happening.

Does a browser read down the list of lelments (our designs) and place everything in 'normal' flow first, then place the floated items next, then place the positioned items? How do they interact in the z plane, that is to say what overlaps what and why? Is it different for each browser or can't they wander *that* far from standards? Or what?

There MUST be an online explanation of how this works somewhere but I haven't found it yet.

So, anyone point me to a useful tutorial for learning this? Maybe it should be a sticky on here? :)

Thanks.

Mike.

Arbitrator
05-16-2007, 01:11 PM
Does a browser read down the list of lelments (our designs) and place everything in 'normal' flow first, then place the floated items next, then place the positioned items? How do they interact in the z plane, that is to say what overlaps what and why?To the best of my recollection, the general rules are:


Elements drawn later overlap elements drawn earlier. For example, if two horizontal lines of text overlap, the lower one will be drawn on top. This is, naturally, related to an elementís order of appearance in the document source.
Child elements overlap parent elements.
Positioned and floated elements overlap other elements.
If text and floats would overlap, the floats are drawn beneath the text.
The z-index property definitively controls the visual order of positioned elements.


The initial drawing location of a positioned element is at the location where it would normally be drawn. In the case of absolute and fixed positioned content, which are not in the normal flow, the position of subsequent content is not affected.

The initial drawing location of a floated element is as far in the direction that it is floated that it can go. The float should also be drawn as far upward as is possible but not before other floats in the source. The floated elementís top should be drawn adjacent to the top of the line of text in which it is floated.


Is it different for each browser or can't they wander *that* far from standards? Or what?I believe things are pretty specific, although vendors are allowed some leeway. For example, if a floated element is positioned upward from its initial location into a previous paragraph, I donít think that itís required to flow the text in that previous paragraph around the float.

As for reality, the way things are drawn varies from browser to browser. This is particularly the case for Internet Explorer, which has a lot of bugs and a feature called hasLayout. Even Firefox has bugs related to drawing floats on the correct line; they should be drawn on the line in which they appear in the source, but Firefox sometimes draws them a line too low.


So, anyone point me to a useful tutorial for learning this? Maybe it should be a sticky on here?Itís not a tutorial, but the CSS2.1 Specification (http://www.w3.org/TR/CSS21/), despite being a working draft, is helpful and is the definitive resource on how CSS should work. Maybe itís just me, but it seems to be pretty friendly for a technical specification.

If you want to spend some money, the book CSS: The Definitive Guide by Eric Meyer is pretty useful for comprehension as well.

kewlceo
05-16-2007, 02:53 PM
It's helpful to understand that browsers do not simply read your (X)HTML/CSS and display the results. Rather, they build a Document Object Model (http://en.wikipedia.org/wiki/Document_Object_Model) (DOM) and it's from there they build your page. An interesting read is DOM Scripting (http://domscripting.com/book/). While it is aimed at those wanting to use JavaScript, it's also a fascinating expose' on the DOM, and how browsers create pages.

Collywobbles
05-16-2007, 11:24 PM
For the pointers. It seems it's not a subjuct documented well?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum