How to display div as column ?

In this post we will learn how to display div as columns by using CSS below are the details.

  • Create two <div>
  • Add class name as “column
  • Add below mentioned css to “column” class
  • Here float and width properties are required to display <div> as column on the page.
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 200px; 
}
  • Also float needs to be cleared after the column <div> so the css will not be applied to non-column elements and clear property is required for same.
  • Add below mentioned .clear class to non-column elements.
.clear{
  clear: both;
}