Chapter 1 - Float
This tutorial will go through how to create layouts with layers and CSS instead of tables.
There are basically just two css properties you'll need; the float property and the clear property, I will explain both in detail.
The float property
As you might know, you can't place two layers beside each other in XHTML, this is where the float property comes in. As the name suggest; it makes the element (in this case a div) float, The concept of floating is however fuzzy at best. The best description would probably be that a floating element ignores the line breaks, hence makes it possibly to place elements beside each other.
Example code below.
CSS
.first_div {
width: 100px;
background-color: #8BC792;
padding: 20px;
}
.second_div {
width: 100px;
background-color: #8BAAC7;
padding: 20px;
}
XHTML
<div class='first_div'>
First Div
</div>
<div class='second_div'>
Second Div
</div>
Demo: Two divs without the float property.
But you probably knew how to do that, what we now add to the code is the css atribute "float". I should point out that you can either float your element to the left or to the right.
float: left; /* Float to the left. */
float: right; /* Float to the right. */
We'll stick to float: left; in this example.
Example code below. (No change in the XHTML code)
CSS
.first_div {
float: left; /* Float to the left. */
width: 100px;
background-color: #8BC792;
padding: 20px;
}
.second_div {
float: left; /* Float to the left. */
width: 100px;
background-color: #8BAAC7;
padding: 20px;
}
Demo: Two divs with the float property.
As you can see, the float in it self isn't that hard to understand. There is however more to it than the float property, you'll need to master the clear property as well, which I will cover in the nest chapter.