Equalize Inner Div Heights

Creating a div with inner divs can present some difficult challenges. Consistent height is one of the common problems of these inner divs. Sometimes we might have 2 inner divs have 2 different background colors that are different from the containing div's background. However, it is very likely that these inner divs are not the same height, which means you will have an odd problem that we will see below with the first example. Typically, I would encourage a CSS solution, but JavaScript can be good solution for this problem.

Let's craft our HTML where to see the problem.

<style>

.container {

	background-color:#CCC;	

	width:600px;

	color:#fff;

	padding:5px;

}

.left {

	background-color:#09C;	

	width:300px;

	float:left;

}

.right {

	background-color:#3C3;

	width:300px;

	float:right;

}

</style>

<div class="container">

    <div class="left">

    	<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </div>

    <div class="right">

    	<p>Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>

    </div>

    <div style="clear:both;"></div>

</div>

You may be new to the "clear:both;" property, but all that CSS property does is to wrap the containing div around the inner divs. In the example, there is an issue with this design. We could certainly play the guessing game and try to add a very large bottom padding or try guessing the height of each div. However, these CSS fixes will not deliver an effective solution. So, we can use JavaScript to create a good workaround.

<style>

.container {

	background-color:#CCC;	

	width:600px;

	color:#fff;

	padding:5px;

}

.left {

	background-color:#09C;	

	width:300px;

	float:left;

}

.right {

	background-color:#3C3;

	width:300px;

	float:right;

}

</style>

<div id="containerId" class="container">

    <div id="leftId" class="left">

    	<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    </div>

    <div id="rightId" class="right">

    	<p>Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a.</p>

    </div>

    <div style="clear:both;"></div>

</div>

<script>

	document.getElementById('leftId').style.height = document.getElementById('rightId').offsetHeight;

</script>

Using JavaScript, we make the inner divs the same height as one another. We already knew that the right div was taller than the left div, so we just set the left div's height equal to the right div's height. Of course, if you don't know which inner div will be taller, you can create an if statement that determines which div is taller. One last note before we go is that padding can affect heights, so you must include the padding in the div's height.