Before CSS was out, people used tables in order to layout their webpages. Now, the introduction of CSS changed all that. CSS provides us with a lot of flexibility to position the elements in a webpage. In this tutorial we’re going to dive into the two main CSS properties used to defining layout of webpages: the position property and the float property.
The position CSS property
The position property is primarily used to define how an element is treated in the flow of the page. There are four main values that could be used with the position property.
static: The default value of any element. This value renders the element in its normal order as it appears inside the HTML.
relative: This is similar to static but the element can still be moved from its original position with the properties top, right, bottom and left.
absolute: This option removes the element out of the normal flow of the HTML and lets you control its position with top, right, bottom and left.
fixed: This value pretty much behaves absolute but it will also position the element in reference to the browser window and not the webpage. So the fixed elements always stay where they are on the screen even when you scroll the page.
With those options in mind we can create a two column layout easily with absolute positioning if we have something like the following HTML:
<div id="navigation">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</div>
<div id="content">
<h1>Header of Column2</h1>
<p>Some Text inside column 2</p>
</div>
By applying the following simple CSS:
#navigation {
position: absolute;
top: 0;
left: 0;
width: 200px;}
#content {
margin-left: 200px;}
We will see that this will set the navigation bar to the left and set its width to 200 pixels. Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page. All that is needed is to set the left margin of the content area to be equal to the width of the navigation bar.
Isn’t that easy? And the good news is we’re not limited to this two-column approach. With clever positioning, we can arrange as many blocks as we like. If we wanted to add a third column, for example, we could add a “navigation2” block to the HTML and change the CSS to:
#navigation {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
#content {
margin: 0 200px;
}
The only downside to absolutely positioned boxes is that because they live in a world of their own, there is no way to accurately determine where they end. If we were to use the examples above and all of our pages had small navigation bars and large content areas, we would be okay, but, especially when using relative values for widths and sizes, we often have to abandon any hope of placing anything, such as a footer, below these boxes. If we wanted to do such a thing, one way would be to float the divs, rather than absolutely positioning them. Which brings us to the second part of our tutorial.
The float CSS property
Floating a box will shift it to the right or left of the container div, with any surrounding content flowing around it.
Floating is normally used to shift around smaller divs within a page, some navigation links to the right of the container, but it can also be used with bigger divs, such as navigation columns.
The float property takes only two values, either float:left or float:right.
Using the same HTML we wrote earlier, we could apply the following CSS:
#navigation {
float: left;
width: 200px;
}
#navigation2 {
float: right;
width: 200px;
}
#content {
margin: 0 200px;
}
However, floating introduces a small problem with container boxes. That means, if you have a container with all floating elements inside it, the container box won’t wrap around the boxes. Its height or width won’t increase to take the full size of the floating elements inside. Luckily, there is a fix for that, the clear property.
clear:left; will clear left floated boxes
clear:right; will clear right floated boxes
clear:both; will clear both left and right floated boxes.
Adding an extra div inside the container with the CSS property clear:both will clear the floating elements and allow the container to wrap correctly around them. So if, for example, we wanted a footer in our page, we could add a footer div in the HTML as follows:
<div id="footer">
<p>Footer Text</p>
</div>
and then add the following CSS
#footer {
clear: both;
}
There we have it! A footer that will appear underneath all columns, regardless of the length. Hope you enjoyed this tutorial. Check this codepen for a full preview.