Note that there are some explanatory texts on larger screens.

plurals
  1. POhtml code works in Chrome and IE9 but not IE8
    text
    copied!<p>The code at the link below displays fine in Google Chrome and IE9. It displays terrible in IE8. Any ideas for how to make it display correctly in IE8? I would like to keep it as a 3-column layout with a fixed middle column and the sides fluid/liquid/flexible and also fill the vertical space to 100% full height of the web browser.</p> <p><a href="http://jsfiddle.net/STVinMP/eZ7Nb/" rel="nofollow">http://jsfiddle.net/STVinMP/eZ7Nb/</a></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;title here&lt;/title&gt; &lt;style type="text/css"&gt; .header { display: table; width: 100%; height:100%; text-align:center; } .header &gt; div { display: table-cell; vertical-align:top; } .col { width:20%; } #rightcol { width:10%; background-image:url('http://quetico.info/images/topo.png'); } #leftcol { width:10%; background-image:url('http://quetico.info/left.jpg'); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; background-size:100% 100%; } #midcol { background:#d0eadd; /* ffff8b; */ padding-top:55px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="header container"&gt; &lt;div id="leftcol" title="portage photo by Hans Solo"&gt;&lt;/div&gt; &lt;div id="midcol" class="col col-2"&gt; &lt;div id="divLeftInd"&gt;some text here&lt;/div&gt;&lt;!-- ######## end of divLeftInd ##### --&gt; &lt;/div&gt;&lt;!-- ####### END OF DIV FOR midcol --&gt; &lt;div id="rightcol"&gt;&lt;/div&gt; &lt;/div&gt;&lt;!-- ####### END OF DIV FOR header container --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload