Floated Div and it's uses

First of all... Why do we need to float div.? That’s the question and answer is quite simple. You want two column as in below image then you need to float divs. Apart from that, designing horizontal menus using divs or ul / li, can be floated to get it arranged horizontally.

If you know the idea but still facing the problem to arrange your divs inside its parent div. This is for you too. 

Let’s have an example:

<style>
    .fl-left {
        background: red;
        height: 100px;
        width: 100px;
        color: #fff
    }
    .fl-right {
        background: orange;
        height: 100px;
        width: 100px;
        color: #fff
    }
</style>
<div class="fl-left">
    I wants to be in Left Side
</div>
<div class="fl-right">
    and I want to be in right Side
</div>

Output:

<style>
    .fl-left {
        float: left;
        background: red;
        height: 100px;
        width: 100px
    }
    .fl-right {
        float: right;
        background: orange;
        height: 100px;
        width: 100px
    }
</style>
<div class="fl-left">
    Yeah.! I am in Left Side.
</div>
<div class="fl-right">
    and I am in right Side.
</div>

Output:

Keeping the floated divs in the main div will help you in positioning it correctly.
See the example:

<style>
    .main {
        border: 2px solid #000;
    }
    .fl-left {
        float: left;
        background: red;
        height: 100px;
        width: 100px
    }
    .fl-right {
        float: right;
        background: orange;
        height: 100px;
        width: 100px
    }
</style>
<div class="main">
    <!----You may name it anything. ----->
    <div class="fl-left">
        Yeah.! I am in Left Side.
    </div>
    <div class="fl-right">
        and I am in right Side.
    </div>
</div>

Output:

So here is the point. When we take the main div, say it parent div and two or more floated divs inside it, the main div doesn’t hold them visually. But when see the code we have tried our best to wrap those floated divs. Hmm..!
Well, nothing to worry.!
We have to clear the float to see it in action.! Let's have a look.

<style>
    .main {
        border: 2px solid #000;
    }
    .fl-left {
        float: left;
        background: red;
        height: 100px;
        width: 100px
    }
    .fl-right {
        float: right;
        background: orange;
        height: 100px;
        width: 100px
    }
</style>
<div class="main">
    <!-- You may name it anything. -->
    <div class="fl-left">
        Yeah.! I am in Left Side.
    </div>
    <div class="fl-right">
        and I am in right Side.
    </div>
    <div style="clear:both"></div>
    <!-- clearing the float -->
</div>

Output:

Yes.! You just did what you wanted to do.! So by floating divs or list-items li  to left we can achieve horizontal menu or create a grid system.!

In our next lesson, we will create a horizontal Menu by using the above tutorial.