Hello Readers , this is a small blog on how to make two columns of equal height regardless of content inside the columns. First, we will write the HTML to make two columns lying side by side having same width. The following code is written to make two columns.
Copy this code in your HTML page.
<!doctype html>
<head>
<title>Columns of equal height</title>
</head>
<body>
<div class="row">
<div class="col1">
<div class="inside-div">
<h2>Column 1</h2>
<p>How to make two divs equal in height lying side by side irrespective of content</p>
</div>
</div>
<div class="col2">
<div class="inside-div">
<h2>Column 2</h2>
<p>Less Content</p>
</div>
</div>
</div>
</body>
<html>
Next, we will write the CSS. Copy the below-written code in your CSS file.
.row {
margin-bottom: 0;
margin-top: 12px;
width: 100%;
display: table;
}
.col1 {
width: 49%;
margin-right: 1%;
display: table-cell;
border: 1px solid #CCC;
}
.col2 {
width: 49%;
margin-left: 1%;
display: table-cell;
border: 1px solid #CCC;
}
.inside-div {
padding-left: 12px;
padding-right: 12px;
padding-bottom: 12px;
}
0 Comment(s)