Quick Tip: Utilizing Normal Document Flow

Layouts can be one of the trickiest things to master when it comes to CSS, though they're undeniably one of the most important. In this Quick Tip we're going to look at Normal Document Flow and how it can assist you with your layouts.

Introduction

Before I explain what Normal Document Flow means I must explain the different types of html elements, and how they are displayed by default.

We're going to concentrate on the two main types of HTML elements, namely "block-level" and "inline" elements. Since the advent of HTML5 we have more specific element categorization (phrasing, flow, and sectioning) though browsers still effectively lean on the block and inline definitions.

Inline elements include items like anchor tags, images and spans. These elements often define text and data, such as turning the words Click Here into a link. By default inline elements display... well, inline. Meaning you can have multiple elements in one line, up until the width of the containing element is reached, at which point they continue onto the next line.

<p><strong>This is an example of several inline elements</strong> all contained within a paragraph <a href="#">including an anchor</a> <span>a span</span> <em>and an emphasis tag.</em> <code>Resize the browser and you'll see how a browser handles these inline elements by default.</code> <abbr>That's right, everything displays on one line and wraps when there's no more room.</abbr></p>

See this inline element demo in action.

Block-level elements however, such as divs and paragraphs, plus newer HTML5 members like article and section, have very different properties by default. Block-Level elements will normally, but not always, contain inline elements or other block-level elements. Think of them as the "structural" element of the two.

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.

Styling

In all cases we can alter how an element is displayed using the CSS display property:

1
2	element {
3	display: block; /or inline, for example/
4	}

These display characteristics also dictate what else we can style. For example, we're free to determine the width and height of a block-level element, but not so with inline elements. Padding and margins can be applied to inline elements, but they won't influence the dimensions of the containing element. Take a look at this example to see what I mean:

The Others

In addition to the common block and inline display attributes, there are a few less often encountered examples. For example, what if you want to display an element inline, but style it like a block-level element? Enter the inline-block value. Inline-block elements preserve properties such as width, height, margin and padding as they're applied to block level elements, whilst maintaining the structural qualities of an inline element.

Inline-Block is a potential alternative to floating elements but certainly isn't without its issues in these circumstances.

Another display value, that isn't as well used is list-item, which does exactly what it says on the tin. Each element with the list-item value applied is displayed vertically, as you'd expect in a list, but they also have bullet points next to them. This is useful for listing data i.e. a list of names, and is logically how list items such as these:


<ul>
	<li>Charles Mahogany Biggins</li>
	<li>Tiggy Wiggins Hydrangea</li>
	<li>Foxy Bumpkins Numpty</li>
</ul>

are displayed by default.

Finally, the last display value worth mentioning is 'none'. Can you guess what it does? That's right, 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. The markup for that element is still sent to the browser, but it doesn't generate a box and is hidden from view - screenreaders won't pick it up either. It takes up no space whatsoever, so other elements can take its place.

So What is Normal Document Flow?

It's how a page is presented when you do nothing to it with regard to structural styling.

With the above in mind, what exactly is Normal Document Flow? It's how a page is presented when you do nothing to it with regard to structural styling. Browsers display content in the order that it's encountered; top stuff first, proceeding content lower down.

When people first start web design, they're often eager to tackle all sorts of fancy tricks, without learning the basics and the fundamentals. If you can understand Normal Document Flow, your web designs will be all the better for it!

Exercise: The Markup

Let's get started on making a simple photo gallery with very basic CSS. I quickly made an html file to get us started, after all we're mainly concentrating on styling. Copy the code below into your text editor, and I'll explain what's in there.


<!doctype html>
<html lang="en">

<head>

	<title>Normal Document Flow</title>
	
	<style type="text/css">
	
	</style>
	
	<!--[if lt IE 9]>
		<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->	

</head>
<body>

	<div class="container">
	
		<h1>An Intro to Normal Document Flow.</h1>
		
		<figure class="photoGallery">
			<img src="http://placekitten.com/g/100/200" alt="" />
			<img src="http://placekitten.com/g/160/200" alt="" />
			<img src="http://placekitten.com/g/220/200" alt="" />
			<img src="http://placekitten.com/g/180/200" alt="" />
			<img src="http://placekitten.com/g/240/200" alt="" />
			<img src="http://placekitten.com/g/130/200" alt="" />
		</figure>
		
		<article> 
		
			<h2> Welcome to my Photo Gallery!</h2>
			
			<p>I am the man with no name, Zapp Brannigan! Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket. Hey, guess what you're accessories to. Leela, Bender, we're going grave robbing. Also Zoidberg. Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you.</p>
			
			<p>Can I use the gun? Oh no! The professor will hit me! But if Zoidberg 'fixes' it&hellip; then perhaps gifts! Fry! Quit doing the right thing, you jerk! Who's brave enough to fly into something we all keep calling a death sphere? I haven't felt much of anything since my guinea pig died.</p>
			
		</article>
		
	</div>
	
	<footer>
	
	</footer>

</body>
</html>

There's an empty css block at the top. This is where we'll begin styling. Below that is a conditional link to the HTML5 Shiv script which will help Internet Explorer recognize and properly display HTML5 elements. Below that, the obligatory body tag. Inside the body tag is the container for the entire page, and also one for the photo gallery. I've used placekitten to get placeholder images, and Fillerama for filler text. So that's about it.

OK, so now just to demonstrate how Normal Document Flow works take a look at the page you've just made. Just as you'd expect right? The images display in one line, until the width of the parent element, in this case the figure (set to 100% of the viewport, but probably with some margins by default) is filled. And although you can't see it yet, all block level elements, such as the div, the figure and the article, are on their own line.

This is Normal Document Flow in action. Now, just resize the browser for a second. Yep, it's fluid! Well, perhaps not completely fluid as we've come to understand it - the images retain their dimensions irrespective of the viewport. Still, your layouts will always be fluid by default.

Exercise: The Basic CSS

Just to prove that I'm not pulling your leg about block-level elements, let's add some background colors to them. In your CSS code block at the top of the HTML file, add this:


.container {
	background: #f2f2f2;
}


article {
	background: #8B0000;	
}

Now, after adding some background colors, check out the result. It should be apparent as to how block-level elements are displayed.

Exercise: The Layout CSS

The styling below only contains CSS properties from the box-model (width, margin, padding etc.), however it shows how very little CSS can create solid layouts.

Replace the CSS you already have, for this:


.container {
	width: 65%; 
	margin:0 auto;
	background: #f2f2f2;
}

figure img {	
	padding-left: 10px;
}

h1 {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #8B0000;
	padding-left: 10px;
}

article {
	background: #8B0000;
	color: #f2f2f2;
	padding: 10px;
}

In this CSS we have designated the width of the container to 65%. We could also have used a fixed pixel value, but percentages retain the fluid nature of the document and demonstrate the document flow more effectively. We've also centered the page using margin: 0 auto.

The rest is all about aesthetics. I've added some padding to give everything some breathing space, specified the fonts and font colors, that's about it.

Save that document and view it in your browser.

Whenever I'm working on a project I always consider how it would look in Normal Document Flow. This allows me to think about how I can improve it with as little CSS as possible.

Conclusion

Using the principles that we've learned today, try building your own examples. You'll find that (structurally) you can achieve quite a lot before getting into the technicalities of floats and positioning.

Additional Resources

Inline Elements on the Mozilla Developer Network
Block-level Elements on the Mozilla Developer Network
Visual formatting model by W3C
The display declaration on QuirksMode
CSS display: inline-Block: Why It Rocks, And Why It Sucks by Robert Nyman
What's the Deal With Display: Inline-Block? by Josh Johnson
Do not use display:none to visually hide content intended for screen readers on 456 Berea St.