Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Understanding the Normal Flow of a document.

    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.
    --
    Newbie, learning.
    Regards from the UK.

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,369
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Quote Originally Posted by Collywobbles View Post
    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.

    Quote Originally Posted by Collywobbles View Post
    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.

    Quote Originally Posted by Collywobbles View Post
    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, 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.
    Last edited by Arbitrator; 05-16-2007 at 02:15 PM. Reason: Added book reference.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder kewlceo's Avatar
    Join Date
    Mar 2006
    Location
    California, US
    Posts
    484
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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 (DOM) and it's from there they build your page. An interesting read is DOM Scripting. While it is aimed at those wanting to use JavaScript, it's also a fascinating expose' on the DOM, and how browsers create pages.
    UBERHOST.NET
    Shared, reseller, semidedicated hosting and dedicated server plans.
    DirectAdmin • Installatron • Money-Back Guarantee • 24/7 Support
    Providing "Service Above All Else" since 2005.

  • #4
    New Coder
    Join Date
    May 2007
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks.

    For the pointers. It seems it's not a subjuct documented well?
    --
    Newbie, learning.
    Regards from the UK.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •