Bill Walton wrote:
> I'm really having a hard time understanding 'normal page flow.' I see it
> referred to, but I haven't been able to find an understandable explanation
> of what it is. If you (or anyone else) could point me to a reference that
> could help me get my arms around those fundamentals, I would *really*
> appreciate it. Thanks again for your help.
On 7/21/06, david <[EMAIL PROTECTED]> wrote:
> Someone else may provide references, but to me normal page flow is how
> the page renders when CSS is turned off.
The official definition[1] is pretty darn confusing for a simple
concept: in normal flow, tags do what you expect them to do.
Paragaphs, headers, divs, and other block-level elements lay out like
blocks, one following the next down the page, while <strong>, <em>,
<a> and other inline elements lay out like lines of text (running from
left to right until they need to wrap to the next line -- assuming
your language runs left-to-right).
Lots of times I talk about something being "in the normal flow" to
differentiate it from something else that isn't -- like an absolutely
positioned icon, or a floated column, or something like that. If
something is in the normal flow, then it behaves like you would expect
it to -- its content is written down the page, like the paragraphs in
this e-mail.
Items not in the normal flow are absolutely positioned or floated.
When they are created, the items following them don't appear
immediately below them. Instead, they simply pretend the absolute item
doesn't exist, or slide over to make room for the floated box. The
absolute item and floated box are described as being outside of the
normal flow.
Where the spec gets confusing is the mind-numbing detail in which they
describe what it means for a block-level element to behave like a
block-level element, or for an inline element to behave like an inline
element. The detail, however, is where you can really get CSS to roll
over and do tricks for you, and where CSS can bite you in the knees if
you're not careful.
The "normal flow" is very important to consider in lots of situations.
One example is this style for footnotes:
p.footnote {
position: relative;
margin-left: 2em;
}
p.footnote sup {
position: absolute;
display: block;
top: 0;
left: -2em;
width: 1.5em;
text-align: right;
}
<p class="footnote"><sup>*</sup> see notes</p>
So what does the normal flow have to do with this?
First off, the paragraph denoting the footnote will only appear after
whatever content was before it. There could be five, ten, or twenty
paragraphs before the footnote, and the footnote will appear at the
end of those paragraphs, because it is in the normal flow with
everything else.
Second, because of where it lies in the normal flow, it has a direct
impact on where the footnote symbol -- the asterisk -- lies on the
page. This is where the "normal flow" concept really is key. Without
the footnote paragraph being relatively positioned, the asterisk would
be at the top-left corner of the screen, perhaps even off-screen
because of the negative left positioning. Because the paragraph is
relatively positioned, however, the asterisk will appear at the top
left corner of this paragraph, no matter where the paragraph is on the
page.
The concept of how content normally flows down the page is perhaps the
most important concept to making layouts flexible. If you consider
what normally happens to content, and you use that to lay out the
majority of your content, you end up with a design that will flex and
stretch to acommodate differing font sizes and screen resolutions
better than if you try to circumvent how content normally falls. This
is why float layouts lend to greater flexibility than absolute
layouts. Once a column is floated, its content uses the rules of how
things work in the normal flow. It just uses them inside that float.
Anyways, hope my ramblings help!
Michael
[1] http://www.w3.org/TR/CSS21/visuren.html#normal-flow
[2] http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
