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 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.
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 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 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
Very descriptive article, I loved that bit. Will there
be a part 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.