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..