Make Sidebar Same Height as Content Div to be Equal

Posted on May 19, 2015 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

In this tutorial you will learn how to make sidebar same height as content div, by giving equal height value to each sidebar and content with jQuery or by giving padding with negative margins using CSS. Check the advantages and disadvantages to know what fits better for you.

HTML Structure

Supposing that you are using the regular html structure in your website, with 2 divs. One for sidebar and one for content. Something like the sample below:

<div class="bodyContainerWrapper">
	<div class="bodyContainer">
		<div class="contentBox">
			<!-- main content goes here -->

		<div class="sidebarBox">
			<!-- sidebar content goes here -->

In my sample files (you can download them at the end of the article) I added some divs special only for inner padding. You can add them too if you want.

The Desired Solution

Make Sidebar Same Height as Content Div

Video Tutorial

Make Sidebar Same Height as Content with jQuery

I will show you the first solution on how to make sidebar same height as content using jQuery. Make sure to have it included inside your <head> tag. You can grab jQuery files from the official download site. Below is the code needed.

// placing objects inside variables
var content = $('.contentBox');
var sidebar = $('.sidebarBox');

// get content and sidebar height in variables
var getContentHeight = content.outerHeight();
var getSidebarHeight = sidebar.outerHeight();

// check if content height is bigger than sidebar
if ( getContentHeight > getSidebarHeight ) {
	sidebar.css('min-height', getContentHeight);

// check if sidebar height is bigger than content
if ( getSidebarHeight > getContentHeight ) {
	content.css('min-height', getSidebarHeight);

In the code above, we got the sidebar and content height inside variables to check which one is bigger than other, to add inline CSS property min-height to make sidebar same height as content using jQuery's css() function.

There are 2 if conditions. One will check the content with the sidebar and the other one will check sidebar with content.

Update May 22nd: On mobile resolutions, to make the content responsive, you can deactivate the min-height property by giving initial value with important tag. As both containers will be one below each other you don't need the equal calculation to be done and you can disable it like I did it below:

@media (max-width: 767px) {
	.sidebarBox {
		min-height: initial !important;

Make Sidebar Same Height as Content with CSS

This is the second solution to make sidebar same height as content and this time with pure CSS. You can read advantages and disadvantages in the explanation below. Here is the code:

.sidebarBox {
	margin-top: -9999px;
	margin-bottom: -9999px;
	padding-top: 9999px;
	padding-bottom: 9999px;
.bodyContainer {
	overflow: hidden;

If you don't prefer to use jQuery, you can give negative top and bottom margins and positive values for paddings. I recommend you to use the jQuery solution instead of this one as this may cause problems in your content. Here is a sample picture how it looks:

Same Sidebar Height as Content with CSS

Not giving overflow: hidden to the wrapper container, sidebar will fall outside the content and the page will be huge! As a tip, you can create another <div> as a wrapper and apply to it overflow. This works great if you have inner paddings like I have in the sample image above.

Update May 22nd: To make this solution mobile friendly, for example at resolution 767 pixels, just disable the margins and paddings by giving null values, because the containers should be placed one below each other and the sidebar will cover the content.

Known Problems for jQuery Solution

If you have some scripts in your content that are generating extra html elements after the page is loaded, such as script generated forms or any other stuff, the jQuery trick won't work correctly.

Why? Because the script will calculate the content height as it is in the beginning, with all non-script elements (plain html). Everything that is generated after the page is loaded will not be counted in height by the script. As an alternative you can use the CSS solution.

The Fix - Calculate Height with Timed Function

To fix this problem you should use a timer that runs a function which will set the height after a certain time, such as 2 or 3 seconds or you can check if a div exists (using setInterval function) and place your code inside it.

Here is a tutorial written by me on how to check for empty divs (without the timed function). I combined the script above with the other tutorial and the results are:

var content = $('.contentBox');
var sidebar = $('.sidebarBox');
var count = 0;
var myTimer;

function setEqualContainer() {
	var getContentHeight = content.outerHeight();
	var getSidebarHeight = sidebar.outerHeight();

	if ( getContentHeight > getSidebarHeight ) {
		sidebar.css('min-height', getContentHeight);

	if ( getSidebarHeight > getContentHeight ) {
		content.css('min-height', getSidebarHeight);

// creating the timer which will run every 500 milliseconds
// and will stop after the container will be loaded
// ...or after 15 seconds to not eat a lot of memory

myTimer = setInterval( function() {

	if ( $('.testContainer').length == 0 ) {
	} else {

	if ( count == 15) {
}, 500);

The script above will run the function to make sidebar same height as content and it will check every 500 milliseconds if an element exists. If the condition will be true, the timer will be cleared. Or I added an extra feature to clear it after 15 seconds to not fill the memory.

Known Problems for CSS

Sometimes when you have sections in your content that uses hidden anchors to point with a link to that section (for example: #someSection), your content will not be visible anymore. This is caused by the negative margins and hidden overflow added to your sidebar. There are no further solutions for this problem.


In the end I will recommend you to use the jQuery solution to make sidebar same height as content, which is much more efficient than the other one with CSS. I attached both 3 examples in the source file and in the live preview page.

Feel free to download them and analyze the code. Let me know if this tutorial was helpful. You can use this method in WordPress too. Just place the script in footer.php in your theme file

Live Demo

Download Files

Buy me a coffe

If this tutorial was useful, you can help me maintain this website with more tutorials by buying me a coffe (or at least the sugar).

Related Articles
  1. Pac says:

    Hi! Great tut! I like your jQuery solution, very nice and easy to implement. Don’t forget about display: flex as well. It’s newer but I love what you can do with it for responsive design and it’s all CSS.

  2. Andy says:


    Great solution.

    Do you know of a way to reduce the size of the columns when the size decreases again?

    For example: if changing the window size from medium to large width, and the content decreases in height again.


    • Hello Andy,

      If you are asking for the jQuery method, you can use CSS @media to give min-height: initial !important; at the desired window size, to disable the inline height.

  3. Kim says:

    I am just trying to create the code without Javascript.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

6 + nine =

Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru,
built under the mighty WordPress platform.