Learning CSS with Less - The float property
Learning CSS with Less - The float property
We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the other chapters of the course in the Tech section of our blog.
Now let's discover the next part of the course "Learning CSS with Less - The float property":
- Topics of discussion
- The float and clear properties
- The clearfix issue
1. Topics of discussion
In this tutorial, we are going to talk about how you can position your divs without losing their div-like properties. So, let's have some fun.
2. The float and clear properties
A div is really cool and all to use, especially if you want it to occupy the entire width of the page. But what if you want to have a div that occupies only a certain amount of width and you want to position something next to it? Can such an unimaginable feat be obtained through the magic of css?
The answer is yes and the solution lies in using the float property. This property is pretty straightforward in its usage in that the value for the property tells you where to position a div on a web page. It has 3 possible values:
- left - when using this value, the div will be placed on the left
- right - when using this value, the div will of course be placed on the right
- none - the default value for this property, which basically means that the element will be displayed where its natural position in the flow of the page is located
Let's write some code to see this property in action:
I am on the left
I am on the right
I am in my normal place
And now for some CSS:
.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}
.float-none {
float: none;
width: 100%;
}
.clear {
clear: both;
}Notice how the divs with the float property on them are positioned on your webpage. Don't forget to compile your .less file though:
lessc styles.less styles.cssNow, about the clear property. It can be used alongside the float property and it specifies if there are areas next to a floating element where other elements cannot float. It can have the following values:
- none - the default value, which allows a floating element to have elements floating on either side of it
- both - when using this value, a floating element cannot have other elements floating next to it on neither side
- right - a floating element cannot have other elements floating on its right side
- left - a floating element cannot have other elements floating on its left side
Some issues may occur when using the float property though. And we are going to address them in the next section.
3. The overflow issue
When you have a regular non-floated and inside of it you have another element that has a float value set to it, an overflow issue will occur. Here is what I am talking about:
Just an element minding its own business
And in our CSS file, we would have the following code:
.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}
.clearfix {
border: 1px solid blue;
}
.h-500 {
height: 500px;
background-color: red;
}Now, if you were to run this code, you'd notice that the enormous red square would be overflowing outside of its parent element. In order to fix this, we need to modify the less file as follows:
.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}
.clearfix {
border: 1px solid blue;
&:after {
content: "";
display: table;
clear: both;
}
}
.h-500 {
height: 500px;
background-color: red;
}This is known in programming as the clearfix issue, hence why I chose that specific name for the class. Now, let's discuss a few things about less. First off, we used the: after pseudo-element, which we will discuss in detail in another tutorial. For now, what you need to know is that by using this pseudo-element, you basically add another child to the .clearfix, after the contents of that element (meaning at the end of it). This is basically a hack that allows you to fix the overflow issue I have mentioned.
What you can also see here is that we used the &: after notation. When compiling the less file, the & will be replaced with the class name in which it is used (in our case, it would be .clearfix).
And that about covers it for this tutorial. In the next one, we will be discussing the alignment and other text-related properties. See you then.