Welcome to part-6 of the series. We will learn about Alignment and Floating in this part. They are a bit of old concept, but still in use at a lot of places.
Head over to your index.html file from the previous part and add three blocks of div, with each containing a h2 and a p tag.
It will show three blocks like below on our web-page. In this normal flow, we will have them one after the other.
Now, we want all these three blocks appears in a vertical fashion and occupying 33.3% space each. We will do this by the float: left property, which floats an element to the left.
So, head over to the styles.css and add the below styles.
Now, all the blocks will occupy the 33.3% of the page.
All elements floating
As you might have seen from above, that the
<hr> after the block div was missing. This happens because when we float something, it messes with tags after it. The way to fix it is to use an empty div with any class name after the floating element. We generally name the class clearfix.
After that in our styles.css use the property clear:both to fix our float issue.
It will solve our issue and the horizontal rule will be shown again.
Next, we will see how to create a two column layout using float. For this create two sections with id — *main__block and side__bar
After this we just have to give one property of float: left and the other float: right, which the required width.
Now, our two column layout is perfect.
Two Column layout
But what if we want to add some padding and border to both. Let’s add the same in our CSS.
border and padding.
It will mess up things in our web-page. It is because by default in css, everything is a content-box which is defined by the box-sizing property. It mean any element like a div, will take it’s width plus the border and the padding.
Things messed up
We are going to solve this issue by making the box-sizing: border-box in both of our elements. It includes the border and the padding to the div’s width.
A very good reference to understand both can be find here.
It solves our issue and the layout again looks good.
This completes part-6 of the series.