Introduction

Recently, I needed to have a div element with height proportional to its width. There are some modern ways of solving this problem (for example, this) but I (unfortunately) had to support IE 7 in this case. Here is that modern solution rendered in IE8 using IE7 mode:

Modern Tricks Look Awesome in IE8

Solution

First, you will need JQuery. Since I’m supporting old versions of IE, I went with v1.11.3:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Next, you will need some test HTML:

<div id='test'>
<p>Some Content</p>
</div>

Let’s add some CSS to easily identify this test div:

 #test {
width: 50%;
color: green;
background-color: black;
}

Now we are ready for our JavaScript:

$(window).resize(function () {
handleOffset();
});
function handleOffset() {
var testDiv = $('#test');
var divWidth = testDiv.width();
var aspectRatio = 0.3; // Update as needed
var divHeight = divWidth * aspectRatio;
testDiv.height(divHeight);
}
handleOffset();

Let’s see how it looks in EI8 running in IE7 compatibility mode:

2006 Never Looked so Good

As you can see, it looks pretty amazing. If you are skeptical and want to check for yourself, you can see the whole thing running in a single page. I have also created a pen that you can copy + paste from. But don’t try running that pen using IE7 because CodePen apparently doesn’t take kindly to geriatric browsers:

CodePen IE7 Mode