Optional right column in IE9

Question

I have the following:

.container {
    background-color: whitesmoke;
    display: table;
    width: 100%;        
    height: 150px;        
    margin: 10px;
}
.main {
    background-color: lightblue;
    display: table-cell;
    width: 100%;        
}
.right-content {
    background: lightcoral;
    margin-left: 16px;        
    width: 250px;
}
.topb {
    border-top: 2px solid #aaa;
}

<div class="container">
	<div class="main topb">This is the <b>main</b> content</div>
	<div class="right">
		<!-- -->
		<div class="right-content topb">Optional content</div>
		<!-- -->
	</div>
</div>

Conditions are the following:

1) main and right are always in the same row;
2) if there is no (dynamic) div right-content, main will take all the width (100%);
3) there is a 16px left-margin between main and right-content(if any);

4*) the page should display properly from IE 9...

With display:flex it could be a great deal, but is not supported in IE9 (compatibility view may pass, but not in real IE9)... Please suggest how to make this code compatible with this version of the "rebel" ( browser.

Answer 1

you need to add some jquery to achieve this.

 $(document).ready(function(){
   if ($(".right-content").text().length > 0) {
     $('.right').show();
   } else{
     $('.right').hide();  
   }

here is the updated fiddle file

hope this will solve your issue.