Need help in a particular grid problem

[ershwetabansal]

I have two boxes on a web page – sidebar and content.
Height of both the boxes may vary depending on the dynamic content getting loaded in each box.

As the content is loaded dynamically, I have no control on the heights of both the boxes. But I have to keep the heights same for both the boxes so they look like partitions of a big box.

I have created a pen to explain the problem –
http://codepen.io/ershwetabansal/pen/ONoprR?editors=0100

Currently I am using javascript to increase the height of the box which is smaller. But as the content is asynchronously loading, the height adjustment looks poor on the screen and quite visible to the eyes.

I wanted to fix it with some css solution. Could someone help me on this. Happy to provide more detail if required.

Edit: I can not use flexbox due to its no support in IE older version.

[Paulie_D]

Define older versions.

Flexbox is supported by IE10 and above.

[ershwetabansal]

IE 9 to be specific.

[Paulie_D]

OK.

CSS tables

http://codepen.io/Paulie-D/pen/yOxPyd

[ershwetabansal]

Thanks a lot, Pauli !!

[Author]

Posts