How to achieve equal height columns with CSS & jQuery

Learn how to create equal column height of the div’s just by giving negative margins and padding using CSS. 
 
 Quick solution for Equal Height Columns
 
 Equal height column, is what every designer is looking for. If there are two or three columns and we need to make all the columns equal, without, fixing the height, then we just crawl after the solution on net.It’s really important to visually make the layout good. After all, it’s all in the hand’s of the designer. I came up, with a quick and easy solution.
 
 We will look at two solutions, one with the pure css and the other with jQuery. 
 
 Firstly create the basic html structure.
 
 I have one wrapper div with a contentbox on the left and the sidebox on the right side.

<div class="wrapper"> <div class="contentBox"> 
<h4> See the column height </h4> 
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</p>
</div>
<div class="sideBox"> 
<p> PageMaker including versions of Lorem Ipsum.has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div style="clear:both"></div> 
</div>

Here is the CSS structure. It does not uses any javascript, absolute positioning, no extra markup, no pseudo classes. Here is the simple logic. I have define negative margins and padding in the sidebox. Give overflow to hidden in the wrapper. That, is really important.

body 
{ padding: 0; margin: 0; font-family:arial; line-height:23px; font-size:12px; }
.contentBox { float: left; width: 59%; vertical-align: top; background: #ccc; margin-top: -9999px; margin-bottom: -9999px; padding-top: 9999px; padding-bottom: 9999px; } 
.sideBox { float: left; width: 36%; vertical-align: top; background: #333; margin-left: 5%; margin-top: -9999px; margin-bottom: -9999px; padding-top: 9999px; padding-bottom: 9999px; color: #fff; } 
.sideBox p, .contentBox p { padding: 15px; } 
.wrapper { overflow: hidden; }
h4 { padding-left: 20px; }

Watch Demo
 
 You can achieve the same result with jQuery. Here is the solution


Originally published at www.voltspecter.com.

Like what you read? Give sonalie nanda a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.