Normal Flow

The normal flow of a page is how HTML elements are normally rendered to a page. The browser starts reading (and displaying) content from the top of the page to the bottom. When it encountersĀ  visible HTML elements, there are two primary ways that elements are displayed on a page: block and in-line.

Block Elements

Block elements take up the entire entire width of their container and are stacked vertically on the page; i.e. block elements is start on their own line. Examples of elements that a normally displayed as a block element are: <p>, <div>, <h1-7>, <header>, <footer>, <section>, <table>, etc.

In-line Elements

In-line elements are laid out horizontally on the page. Their width only takes up the horizontal space necessary for the element. Examples of inline elements are: <span>, <em>, <strong>, <a>, <img>, etc.

Modifying the Defaults

CSS allows us to set (modify) the default properties of HTML elements. The position and display properties affect that normal (default) flow of elements on a page; flow meaning how the elements interact with the elements around them. When two div tags are put next to each other, by default they appear vertically on the page. That’s because they are block elements.

When two images are put next to each other, by default they appear side by side on the page. That’s because they are in-line elements.

When we assign a value of absolute or fixed to an element’s position property, the element is taken out of the normal flow. The spacial relationship thatĀ  element has with the other elements on the page are changed. It’s almost as if the other elements don’t see it any more. From the other elements point of view, since it isn’t there, they move in to take up that space. It’s like a big rock in a river. The water flows around the rock. Pull the rock out of the river, the water fills in to fill the void left by the absence of the rock. Make an element absolutely positioned, the elements that follow it rush in to fill the void.

 

 

Published by

Dale

eLearning and Instructional Designer. Web Designer. Assistant Professor for the Multimedia Design Concentration at Nashville State Community College. Eleven years with Nashville State. Seven years as a corporate trainer, teaching CAD, design, and office applications. Developed Associate in Applied Science degree program in Multimedia Design and teach web-standards, Flash, html, CSS, web animation, and design courses. Teach in both classroom and online environments. Education: M.Ed. in eLearning Technology and Design B.S. in Mechanical Drafting and Design Technology