Align Div Horizontally and Responsive in HTML5

Here I’m going to show to how to align Div horizontally and responsive.

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 I am going to apply a 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/.