Remember back in the day when MySpace was the social network of choice and all CSS-driven element positioning was done with tables? Up hill both ways? In 10 feet of snow? With no shoes!

No? Good! It's easier to forget that which you never learned in the first place (think about it). Moving along...

In this lesson we'll be covering how to use CSS to alter the placement and location of elements. We'll talk about floats and how to properly use and clear them. We'll discuss the differences between absolute, relative, fixed and static positioning. Then you'll read through a walkthrough that takes you through the details of these concepts. By the end of this lesson you'll be in a great position to use CSS to position your elements. Position. Let's dive in!

CSS Floats

So what is a CSS float? Paraphrasing the MDN docs:

CSS floats are used to take an element out of the normal flow of the document and place it at the left or right side of its containing element.

Before we examine what "out of the normal flow of the document" means, let's take a look at the types of floats. First, the property you'll use to set the float value of an element is float. Easy to remember huh? The most commonly used values for the float property are:

1. left: Float the element to the left
2. right: Float the element to the right
3. none: Remove any float value

Floating Left and Right

Floating an element left or right is easy. All that you must do is set its float property to left or right. Here is an example:

.left {
  float: left;
}
.right {
  float: right;
}

The above code will float any element with the class of .left to the left and any element with the class of .right to the right. This seems almost too easy and too good to be true right? In fact, it is too good to be true. The reason is that "out of normal flow" concept we mentioned earlier. This brings us to clearing and the clearfix.

Normal Document Flow

What does "taken out of normal document flow" mean?

The normal document flow is the default way in which elements are rendered and positioned. In the case of positioning and floats, this normal flow causes child elements to be contained by parent elements. This is what we expect, after all it makes visual sense when we look at HTML like this:

<div id="parent">
  <div id="child"></div>
</div>

From the above markup we expect that the child div will be rendered inside the parent div. The above elements would be rendered nested as expected in "normal document flow". However, this is altered when using floats. This is why we must use a clearfix.

Clearing Floats

Clearing floats is how we refer to returning to normal document flow. It is a way for you to specify that an element should not be effected by any previous elements that are floating. This sounds abstract without an example though.

.clear {
  clear: both;
}

<div class="clearfix">
  <div class="square blue left"></div>
  <div class="square blue left"></div>
  <div class="square red clear"></div>
</div>

Consider the above markup keeping in mind that the .left class will float elements to the left. Notice that we have a .clear class on the last div that applies the style clear: both;. This specifies that the last div should return to the normal document flow and appear as a block element under the floating divs. Otherwise, that div would actually be overlapped by the floating divs because they are "outside the normal document flow". Here's a rendered visual example of the two cases:

Not clearing the last div hides it under the floating elements, <div class="square red"></div>.

Clearing the last div allows it to return to normal document flow and appear under the floating elements, <div class="square red clear"></div>.

Clearfixing Container Elements

Clearfixing is a common bit of CSS that allows container elements to contain floating elements. You might think this happens by default, but it doesn't. Looking at the example above, without the .clearfix class applied, those floating divs would actually be removed from the "normal document flow" and pop outside their container div! Also, notice that we didn't provide the CSS for the .clearfix class yet. We'll explain that here.

.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}

Looking at the code above you'll likely be wondering just what the heck is going on. Understandable. You haven't seen pseudo classes yet but the concept is simple. The pseudo selectors ::before and ::after target the area before and after an element. Basically we're saying that those pieces (which aren't visible by default) should:

1. Display as tables
2. Have empty whitespace content

Next we specify that the ::after element should clear both types of floats. What does all this do? Basically this surrounds the contained floating elements with invisible walls that keep them in their container.

Many CSS frameworks will supply a .clearfix class by default and even apply it to commonly used classes like .container. However, because we're working with raw CSS and building from scratch you'll need to create this yourself.

The position Property

When you want precise pixel locations for your elements you want to use the position property. The position property allows you to specify a number of different position types that have different effects on how the element is positioned. After these are set you can set the element's exact location with the left, right, top and bottom properties. Let's examine the different types of positions.

1. static: The default value for the position property. Positions the element in normal document flow.
2. fixed: Positions the element relative to the viewport (the outermost element). The element is removed from normal document flow.
3. absolute: Positions the element relative to the next highest relatively or absolutely positioned element in the element hierarchy. If none is found, positions the element relative to the viewport. The element is removed from normal document flow.
4. relative: Positions the element relative to its current position. The element remains in normal document flow.

These definitions can be a bit opaque at first. However, with an example and a bit of explanation you'll see that they are quite accurate. Here is some markup and CSS that create a stack of divs:

.square {
  width: 64px;
  height: 64px;
}

#relatively-positioned-parent {
  position: relative;
  top: 32px;
  left: 32px;
  width: 256px;
  height: 256px;
}
#absolutely-positioned-child {
  position: absolute;
}
#relatively-positioned-child {
  position: relative;
}
#fixed-position-child {
  position: fixed;
  top: 8px;
  left: 8px;
}
#absolutely-positioned-child,
#relatively-positioned-child {
  top: 32px;
  left: 32px;
}

<div id="relatively-positioned-parent" class="orange">
  <div class="square white">Static</div>
  <div id="relatively-positioned-child" class="purple square">Rel</div>
  <div class="square white">Static</div>
  <div id="absolutely-positioned-child" class="cyan square">Abs</div>
  <div class="square white">Static</div>
  <div id="fixed-position-child" class="grey square">Fixed</div>
</div>

Here is the rendered result:

Let's talk about the effect of each type of positioning displayed here.

1. Fixed: The fixed position div is removed from its container (normal document flow) and placed relative to the viewport. You can see it is outsite of its containing div and positioned 8px from the top left corner of the viewport.
2. Absolute: The absolutely positioned div is removed from the normal document flow but remains a child of the relatively positioned parent. However, you can see it overlaps the div above it and the surrounding divs are acting as if it is not there. This is the effect absolute positioning has on removing an element from the normal document flow.
3. Relative: The relatively positioned div remains in normal document flow. You can see this because of the missing space in the stack of white divs. You can also see that it is moved 32px from the top left corner of its original position in normal document flow.

It's worth noting that position: relative; is commonly used just to add a position value to the parent element of a child element with position: absolute;. This allows the child element to be positioned absolutely relative to the position of the parent. In the "real world" you'll rarely use relative positioning for anything else than this purpose.

Wrapping your head around CSS positioning is a bit complex. Play around with these concepts! That is usually the best way to remove the mystery. Another way is to further your understanding by more detailed reading!

Shay Howe: Positioning Content

We've covered the definitions and a few examples of positioning with floats and the position property. Now your task is to read through the Shay Howe walkthrough on Positioning Content. He'll discuss how these concepts can be taken a step further to begin creating layouts and grids as well as provide a few editable code examples of the CSS properties we've introduced here.

Code Review

The important bits of code from this lesson

/* Floats */

.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}


/* Clearfix */

.clearfix::before,
.clearfix::after {
  display: table;
  content: " ";
}
.clearfix::after {
  clear: both;
}


/* Positioning */

#absolutely-positioned-child {
  position: absolute;
}
#relatively-positioned-child {
  position: relative;
}
#fixed-position-child {
  position: fixed;
  /* ... */
}

Wrapping Up

CSS positioning provides you with a lot of options. As you progress and use these tools over and over you'll realize how useful they can be to create rich layouts and user interfaces. They may seem complex at first and you might be wondering, "But why can't we just use tables?!". Have patience and continue to use CSS positioning and you'll soon see the power behind its precision!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!