THE NORMAL DOCUMENT FLOW from Quick Tip: Utilizing Normal Document Flow by Alex Rodrigues on Web tuts

THE DOCUMENT FLOW THE NORMAL DOCUMENT FLOW is how a html page is presented when you do nothing to it. That is an HTML document without any structural / CSS styling. When people first start to build websites, they're often eager to tackle all sorts of fancy tricks, without learning fundamentals…. The first step towards all those fancy tricks is understanding Normal Document Flow. HTML ELEMENTS Previously we looked at a few different HTML elements… We basically discovered that each HTML tag can be considered an HTML element. Browsers display different HTML elements in various ways. There are two main element types that we need to concentrate on. These are called inline elements and block-level elements.

INLINE ELEMENTS Inline elements include items like anchor tags, images and spans. These elements often define text and data. It may seem obvious but by default inline elements display ‘inline’. Meaning you can have multiple elements in one line, up until the width of their containing element is reached, at which point they continue onto the next line. DEMO 1

BLOCK LEVEL ELEMENTS Block-level elements are things like divs and paragraphs (plus some HTML5 elements like article and section) and have very different properties by default. Browsers will (by default) format block-level elements with a line break before and after. In other words, block-level elements will always start on a new line (stacking up like blocks) unless otherwise styled. Block-level elements are often used to contain inline elements or even other block-level elements. Think of them as the "structural" element of the two.

STYLING BLOCK vs INLINE There are a few key concepts to remember when styling block level vs inline elements: 1)You can to determine the width and height of a block-level element, but not inline elements. 2)We can add margins and padding to both block and inline elements, but with inline elements they wont influence the dimensions of their container. DEMO 2 However, in all cases we can alter how the browser displays an element using the CSS display property element { display: block; /*or inline, for example*/ }

INLINE BLOCK & NONE In addition to the common block and inline display attributes, there are a few less often encountered examples; display: inline-block and display: none; For example, what if you want to display an element inline, but style it like a block-level element? INLINE BLOCK Inline-block elements preserve properties such as width, height, margin and padding as they're applied to normal block level elements, whilst maintaining the structural qualities of an inline element. NONE Finally, the last display value is ‘none'. Any element that has its display property set to "none" simply doesn't show up on the page; it's visually (along with all elements contained within it) removed from the document.

EXERCISE Visit the web tuts article and complete the exercise - herehere

CSS POSITION PROPERTIES from CSS Positioning 101 by NOAH STOKES on A List Apart

THE CSS POSITION PROPERTY Now that we understand the NORMAL HTML DOCUMENT FLOW the next step to mastering website layouts is understanding the CSS position property. In the article CSS Positioning 101 NOAH STOKES describes building websites as like playing with building blocks as a child. He suggests that in this setting the NORMAL DOCUMENT FLOW could be imagined as similar to law of gravity. So the ‘normal flow’ is how your elements stack one on top of each other… however, what we can do is give those blocks properties that enable them to defy the law of gravity. This is where CSS positioning comes in. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit.

STATIC & RELATIVE The static and relative position properties behave a-lot like your childhood building blocks—they stack as you would expect. EXAMPLE 1 **Note that static is the default position value of an element, should you fail to apply any other value. The static value is for simple, single-column layouts where each block element must sit on top of the next one. Relatively positioned elements behave just like statically positioned elements, with one exception; they create a new coordinate system for their child elements. So this means that you can offset child elements with the top, left, bottom and right css properties. EXAMPLE 2

ABSOLUTE Unlike the static and relative values, an absolutely positioned element is removed from the normal flow. This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow. Think of it as an element with a giant strip of velcro on its back. Just tell it where to stick and it sticks. Just like relative elements, absolute elements create a new coordinate system for their child elements. EXAMPLE 3 **Note the offset coordinates are in respect to each parent element.

FIXED and INHERIT FIXED An element with position: fixed shares all the rules of an absolutely positioned element, except that the viewport (browser/device window) positions the fixed element, as opposed to any parent element. Additionally, a fixed element does not scroll with the document…. It stays fixed to the screen. EXAMPLE 4 INHERIT This works as the name implies: The element inherits the value of its parent element. Ultimately, you can type inherit or the parent element’s value and get the same result.