These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
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!
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:
left
: Float the element to the leftright
: Float the element to the rightnone
: Remove any float valueFloating 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.
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 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 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:
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.
position
PropertyWhen 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.
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.
8px
from the top left corner of the viewport.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!
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.
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;
/* ... */
}
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!