HTML&CSS for 3 column layouts

Question

I have 3 DIVs that are in a container.

now: a div should be at left that it's width is not obvious a div should be at right that it's width is not obvious too

problem: a div in the middle that always should be maximized in remained area

i did that by using display property in FF but it seems IE does not support table-cell for display property.

css :

#bd {display:table;width:800px;}
#doc {display:table-row;}
#s1{display:table-cell; width: 200px; background: green;}
#s2{display:table-cell; background: red;}
#s3 {display:table-cell; width: 200px; background: green;}

html :

<div id="bd">
   <div id="doc">
      <div id="s1">Section 1</div>
      <div id="s2">Section 2</div>
      <div id="s3">Section 3</div>
   </div>
</div>

this code works correctly in firefox but not in IE

i appreciate your help

Answer 1

I solved the problem myself

Answer 2

Could you post your solution please?