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:
  1. <div class="main">  
  2.     <div class="first"> First Div </div>  
  3.     <div class="second"> Second Div </div>  
  4.     <div class="third"> Third Div </div>  
  5.     <div class="clear"></div>  
  6. </div>     
Here I’ve three Div’s and now I am going to apply a style to it.
  1. main {  
  2.   width100 %;  
  3. }  
  4.   
  5. .first {  
  6.   width30 %;  
  7.   height100 px;  
  8.   background#CCC;  
  9.   floatleft;  
  10. }  
  11.   
  12. .second {  
  13.   width30 %;  
  14.   height100 px;  
  15.   backgroundgreen;  
  16.   floatleft;  
  17. }  
  18.   
  19. .third {  
  20.   width30 %;  
  21.   height100 px;  
  22.   backgroundred;  
  23.   floatleft;  
  24. }  
  25.   
  26. .clear {  
  27.   clearboth;  
  28. }   
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:
 
output
Here you can find the fiddle. : https://jsfiddle.net/saranyatr/12tsq8bd/.