So far, every HTML element we have added to our pages sits just below the previous element. Each element follows the last element all the way down to the bottom of the page.
But we know how to set the width, height and margin of elements, so why can’t we make elements sit next to each other with these properties?
Just because Aria is on the sofa, it doesn’t mean I have to sit on the floor; if we both fit then we can sit next to each other and share the sofa.
We can.
But it doesn’t mean we have to.
This is where the float property comes in.
The float property is used to position your HTML elements and lets an element float inside its div so that it does not have to be shown immediately after the previous element or before the next one. It allows you to have HTML elements which sit next to each other on your page.
By default, HTML elements don’t float.
float: none;
So with CSS, elements can either float to the left or to the right but only as long as their width allows them to do this. For example two images with width set to 100% can’t float next to each other as they are too wide to fit on to one screen.
The next couple of examples use an image element next to a paragraph element with the image element set to float either left or right.
Notice how the text wraps around the image where it can. This is like when I am determined to get some space on the sofa despite Aria taking up as much space as possible and I end up sort of spooning her.
img {
float: left;
width: 33%;
}
img {
float: right;
width: 50%;
}
No code has to be added to the paragraph element as it is the image that is floating. By default, paragraph elements take up the whole width of their div; if there is a floating image in the way the paragraph will just take up as much room as it can and wrap around it.
The same can be seen in an example which uses two paragraph elements. Normally one paragraph element will follow the other so the elements sit on top of one another, like this.
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
There are a lot of examples in this lesson and these examples mainly use pragraph elements. To show a difference between paragraphs that are part of the lesson and paragraphs which are part of examples, the example paragraphs are shown in bold with italic text.
So what happens if you want to arrange your text into columns?
Well this is simple enough right?
Just set the first element to float to the left.
Ok. Let’s have a look.
#left-column {
float: left;
}
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
Why Not The Middle?
Remember that without any other CSS, the paragraph elements will take up the whole width of their divs. So these two paragraph elements are too wide to sit next to each other.
Ok, let’s set the width of left-column to 50%.
That way there will be enough room for the other element.
#left-column {
float: left;
width: 50%;
}
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
Almost there.
Because there is no CSS to set the width of the second element, it is wrapping around left-column. To make sure both elements appear as columns, set the width of the second paragraph element too. There is no need to make the second element float because left-column is already floating.
#left-column {
float: left;
width: 50%;
}
#right-column {
width: 50%;
}
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
To make more complex pages, you can always set div elements to float to create sections of each page. You may notice that on a lot of pages, including this one, the content is split into columns.
The navigation bar at the top takes up the whole width of the page and so does not float.
Let’s build this up slowly with an example based on the two columns from before. First, add a third paragraph element and surround each one in its own div.
<div id="left-column">
<p>The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.</p>
</div>
<div id="middle-column">
<p>Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.</p>
</div>
<div id="right-column">
<p>The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.</p>
</div>
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
To make each div the same size, let’s set the width using CSS. For equal size divs, divide the 100% width by 3 which is pretty much 33%.
#left-column {
width: 33%;
}
#middle-column {
width: 33%;
}
#right-column {
width: 33%;
}
Now we have this:
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
In the last example, we made the first element float to the left and the paragraph element wrapped around it. This won’t work this time because the second paragraph element is inside a div and divs don’t wrap around other elements.
But what we can do is make the second div also float to the left.
It won’t get in the way of the first div, because that is already floating and the code for the first div has been added to the file first and so floats to the left first. Instead it will make the second div sit next to the first. Like this:
#left-column {
width: 33%;
float: left;
}
#middle-column {
width: 33%;
float: left;
}
#right-column {
width: 33%;
}
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
There are two ways to put the third column in the correct place.
The first is to add a margin to the left of the third div. Without any other code, elements tend to stick to the left hand side of a page and because div elements don’t wrap around other divs our third column is not in the right place. If the margin is big enough, it will be able to slot into the space next to the second column.
This is like me shifting along the sofa until there is space for me to sit when Aria is spreading out.
The margin would need to be at least as big as the width of both the other columns so that the third column would sit next to them.
33% x 2 = 66%
#right-column {
width: 33%;
margin-left: 66%;
}
Now we finally have three columns:
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
So far so good. This approach gives you the three columns we wanted.
But…
You could just make the third column also float to the left.
Again, the third column wouldn’t get in the way of the other elements because divs don’t wrap around each other. And as the code for the third column was added last it would have to sit next to the second column; just like how the second column sits next to the first.
#left-column {
width: 33%;
float: left;
}
#middle-column {
width: 33%;
float: left;
}
#right-column {
width: 33%;
float: left;
}
This also gives us the opportunity to reduce our CSS code to make it easier to understand. Can you see how?
The CSS for each element is the same.
Oh!
This is what classes are for right?
Exactly!
So we can make each column part of the same class and they can all use the same CSS.
Aria is completely right. This is exactly what classes are for; allowing similar elements to reuse CSS so it is simple to change and easy to add more.
Here is what the finished example looks like:
CSS
.column {
width: 33%;
float: left;
}
HTML
<div class="column">
<p>The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.</p>
</div>
<div class="column">
<p>Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.</p>
</div>
<div class="column">
<p>The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.</p>
</div>
The left side of the sofa is the closest to the door. So when it's dinner time, or breakfast time, or snack time the journey to the kitchen is shorter.
Right in the middle of the sofa is the place to be. Closer to the kitchen than the right hand side, but spends more time in the sun than the left side. Best of both worlds.
The right side of the sofa gets the sun for longer during the day so it is almost always warmer. If you want warm naps in the sun, and of course you do, the right side is the better choice.
That was pretty interesting.
But I’m still not sharing the sofa with you.