Manipulate Normal Document Flow to Create CSS Layouts – Float Technique

The goal of this article is to introduce to the concept of “normal document flow” in a browser and how you can manipulate it.

This post is part of a CSS Layout Course that will teach you how to create a functional layouts in CSS using the float technique. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.

When you are writing an HTML document, you’re positioning the boxes or elements probably without knowing it. You basically do this in two different ways:

  • You choose some sort of order in order to put your HTML tags in your HTML documents for example, in header, you usually first write an h1 element to denote the main theme of the whole website and then write a p element to give the reader some information about the contents of the h1 tag. Well, you might do this in different ways depending on the nature and purpose of the project but you almost never write the p element first. That almost never happens. So the order that you choose is going to determine in what order you’re going to have the two elements appear in the browser window.
  • Every html element that you write in an HTML document takes some sort of default value in your CSS automatically if you don’t change the default value. For example every HTML element has a CSS property called “position”. The value of the position property is by default always set to “static” for all the elements on the page unless you change them. position: static; basically means that all elements are going to appear in the document in the browser in some sort of natural flow and flow throughout the whole page. So if you don’t change the default value of the CSS property position, you are actually setting it to “static”, which means you have chosen the normal document flow. The document flow is basically the state when the browser is going to take care of everything for you, position-wise. If you manipulate the document flow, you’ll be responsible to make sure everything on the page is going to be positioned properly so that your content is accessible to the reader.

So now, you know about the normal document flow. Our goal here is to manipulate the normal document flow in a safe way, that is, in such a way that you position everything you need everywhere you wish to, without disturbing other elements. for this purpose you can use other values of the CSS Property position. We said that the default value is “static”. The other possible values are “absolute, fixed, relative, initial and inherit”. initial and inherit are not values specific to the CSS “position” property. They can be set in case of almost all the CSS properties. So we’re not going to talk about them here. “absolute, fixed and relative” are the values that we need to understand in order to be able to manipulate the normal document flow in the browser window.

There’s one more way to manipulate the normal document flow and that is using the CSS “float” property. float is a very special case and behaves in strange ways. float was originally supposed to be used for floating text around an image on your website but web designers used it to create CSS layouts mainly because CSS didn’t have any tools to create layouts back around 10 years ago. We are still using float to create layouts (in some cases – there are other tools as well) although CSS3 has introduced the CSS property “flex” but not all browsers understand flex yet. Moreover, it’s going to take some time for developers to change the way they do layouts. Everyone is using techniques like using float to create layouts now.

This post is part of a CSS Layout Course that will teach you how to create a functional layouts in CSS using the float technique. If you’re interested in this topic and you’d like to have access to the complete course, please use the link at the end of this article.

Author: John Raschedian

Web Developer

Leave a Reply

Your email address will not be published. Required fields are marked *