How to create three column layout equally using HTML and CSS

by

How to create three column layout equally using HTML and CSS

In this tutorial, we will learn to create three column layout equally using HTML and CSS. In order to do this, we have to understand the following CSS properties.

Also Read, How to auto calculate the sum of input values using Jquery or Javascript

CSS properties to create three column layout equally

  • Float
  • Width
  • Clear
  • Display
  • after Selector

Complete Code:-

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
.container{
  width:60%;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 150px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>
<h2>Three Columns Equally</h2>
<div class="container">
  <div class="row">
    <div class="column" style="background-color: #aaa;">
      <h2>First Column</h2>
      <p>This is the first column</p>
    </div>
    <div class="column" style="background-color: #aaa;">
      <h2>Second Column</h2>
      <p>This is the second column</p>
    </div>
    <div class="column" style="background-color: #aaa;">
      <h2>Third Column</h2>
      <p>This is the third column</p>
    </div>
  </div>
</div>
</body>
</html>

Illustration of the example with above CSS properties

Float:-

Float property defines how an element should float i.e. on the left side or on the right side. In this example, we will use the left property.

Width:-

It is used to define the width of each element. It may be columns, paragraphs etc. In this example, we will use 33.33%.

Clear:-

Clear property decides to float on the sides of the floating elements. To use the clear property, we have to use the float property. If float property is set to left then clear property should be set to left.

Display:-

Display property defines how the floating elements should be displayed. In this example we will use the table format. In this example we are using the table property as we show in the form of table.

Also read, How to calculate JavaScript difference between two dates in days

Conclusion:- I hope this tutorial will help you to create an HTML layout equally. If you have any doubt then please comment below. To know more about HTML and CSS Click Here


2 thoughts on “How to create three column layout equally using HTML and CSS”

  2. Hey There. I found your blog using msn. This is a
    really well written article. I’ll make sure to bookmark it and return to read
    more of your useful information. Thanks for the post. I’ll definitely return.

    Reply

Leave a Comment