Work around to make table-cell CSS render properly in IE6/7?

Question

Hey,

My site is showing up fine in IE8/FF/Chrome but I can't figure out how to make it function with IE.

The relevant CSS:

#maincontent {  
  display: table;   
}  

#content {  
  display: table-cell;  
  width: 620px;
  padding-left:4%;
  padding-right: 22px; 
  padding-bottom:15px;  
} 

#sidebar { 
  display: table-cell;  
  width: 300px; 
} 

#content and #sidebar are in #maincontent. On IE6/7 #sidebar will be under #content. I've tried setting the sidebar to display:block with a float, and it will then render fine in IE6/7 but all the other browsers get screwed up. How can I get this setup?

Thanks

Answer 1

CSS tables aren't supported in IE, so you'll probably want to try working with just floats and margins. I'd recommend taking a look at the positioning on one of these templates and working from there.

Answer 2

From W3Schools:

No versions of Internet Explorer (including IE8) support the property values "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", or "table-row-group".

The best solution is probably to build a real table.