div's with CSS property display:table-cell flickers

Question

Whatever I do, I am not getting my div's flicker on loading.

I have three main divs inside the content div . they are left, right and middle div , Inside the middle div I have dynamically created menus that I want the width to be equally divided to fit to the middle div.

CSS

#content{
    width: 1000px;
    display: table;
}
#left, #right, #middle{
    float: none;
    vertical-align: top;
    display: table-cell;
}
#left, #right{
    width: 200px;
}
#middle{
    width: 600px;
    min-width: 600px;
}

.. HTML

<div id="content">
   <div id="left">very less text and images in this cell</div>
   <div id="middle" style="<?php echo $middleWidth;?>">I have lot lots of images, hyperlinks and text in this page</div>
   <div id="right">very less text and images in this cell</div>
</div>

PHP

<?php
   //some calculations..
   $middleWidth = '602'.'px'; 
   //this value is dynamic, I might get from 600px to any value that can be divided to get 0 remainder.
?>

while the website loads the page flickers, I can see the middle content taking width of 800px that is width of content div minus width of left div. even though I am giving min-widht, max-width, the flickr is not at all stopping.

One more challenge for me is thing should work on IE.

Please help me..

Answer 1

This syntax is not correct

<div id="content">
   <div id="left">very less text and images in this cell</left>
   <div id="middle" style="<?php echo $middleWidth;?>">I have lot lots of images, hyperlinks and text in this page</middle>
   <div id="right">very less text and images in this cell</right>
</div>

</left> </middle> and </right> is not valid html . Just close the divs normally </div>