Float in css
In this aticle we are going to learn about float, float right and float left in css, how to place or position div elements in html using float in Cascading Style Sheets.
We learnt about css in general learning what css can do in web pages, borders in css, padding in css and margins in css so, now we are going to learn about float to position div elements along side other div elements.
Float
Float help web developers to decide where to put div elements either on the left or right of other div element preventing it from being below it.
Default divs
Default div elements will follow each other, meaning the second div element will be positioned below the first div by default.
Let us create two normal divs with no float applied, copy and paste below code.
<div style="background: yellow;">This is a first div element.</div>
<div style="background: red;">This is a second div element.</div>
So, we should have the following results.
By default the two div elements follow each other, the second element is below the first element. So, we are going to prevent this using css.
Float right
Float right gives a div element that the css is applied to, to be positioned on the right of other div element. For example, the second element will be positined on the right of the first div not below it.
Let us create div element with float right, copy and paste below code.
<div style="background: red; float: right">This is a second div element.</div>
So, we should have the following results.
We can see that the div element is positioned on the right not on the left by default. So, we are going to create another div element with float left.
Float left
Float left gives a div element that the css is applied to, to be positioned on the left of other div element. For example, the first element will be positined on the left of the second div not below it.
Let us create div element with float left, copy and paste below code.
<div style="background: yellow; float: left;">First div element.</div>
So, we should have the following results.
We can see the div element is positioned on the left like by default not on the right. So, we are going to create two div elements the first with float left and the second with float right.
float Left and float right
Le us create two div elements, the first with float left and the second with float right, copy and paste below code.
<div style="background: yellow; float: left;">First div element.</div>
<div style="background: yellow; float: right;">Second div element.</div>
So, we should have the following results.