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. width: 100 %;
  3. }
  5. .first {
  6. width: 30 %;
  7. height: 100 px;
  8. background: #CCC;
  9. float: left;
  10. }
  12. .second {
  13. width: 30 %;
  14. height: 100 px;
  15. background: green;
  16. float: left;
  17. }
  19. .third {
  20. width: 30 %;
  21. height: 100 px;
  22. background: red;
  23. float: left;
  24. }
  26. .clear {
  27. clear: both;
  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/.