Align Div Horizontally and Responsive in HTML5

Let’s start with the HTML code:

<div class="main">
    <div class="first"> First Div </div>
    <div class="second"> Second Div </div>
    <div class="third"> Third Div </div>
    <div class="clear"> </div>
</div>

Here I’ve three Div’s and now am going to apply style to it.

main
{
    width: 100 % ;
}.first
{
    width: 30 % ;
    height: 100 px;
    background: #CCC;
    float: left;
}.second
{
    width: 30 % ;
    height: 100 px;
    background: green;
    float: left;
}.third
{
    width: 30 % ;
    height: 100 px;
    background: red;
    float: left;
}.clear
{
    clear: both;
}

I’ve set the width of main Div as 100% - full width. And the width of the three div’s are also set in percentage. This property is used to make the design responsive.

The output will be the following:


Here you can find the fiddle. : https://jsfiddle.net/saranyatr/12tsq8bd/.