Demo Page: Normal Flow

Layout sample using no 'position:' properties

CSS for this page can be found in the head tag of this html file (view source from your browser menu to see it).

On Normal Flow

Normal flow is a phrase used to describe a layout based simply on the sequence of html elements as they are written, where no layout properties are applied to any elements. It’s the default order of html elements as written in the source code. The mobile phone orientation of many web pages is based on normal flow.

This DIV named 'content_testBox1' is in the unaltered sequence (“normal flow”) of the html. It has these properties applied to it: background-color and padding, as well as a few typesetting attributes so that you can easily see it.
This div is called 'content_testBox2.' Having no margin settings applied to it, it butts right up against the item above it in normal flow.
This div (called 'content_testBox3') has a margin-top value applied to it so that there is distance between this box and the one that precedes it in normal flow. An alternative to achieving this same result would be to apply a margin-bottom property to the previous div, and have no margin settings for this one.

Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)…