Note that there are some explanatory texts on larger screens.

plurals
  1. POFloat Left 100% height div - gap between divs
    primarykey
    data
    text
    <p><strong>Mark Up</strong></p> <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Zuhaib.test" %&gt; &lt;!-- Put IE into quirks mode --&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;link href="css/general.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/outbound.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="form1" runat="server" class="wrapper"&gt; &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt; &lt;/asp:ScriptManager&gt; &lt;div id="left"&gt; &lt;/div&gt; &lt;div id="right"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>html, body { margin:0; padding:0; border:0; overflow:hidden; width:100%; height:100%; } * html body { height:100%; width:100%; } *{ margin:0; padding:0; } .wrapper { position:fixed; top:0px; bottom:0px; left:0px; right:0px; height:100%; width:100%; } * html .wrapper { width:100%; height:100%; } #left{ float:left; height:100%; width:100px; overflow:hidden; background-color:Blue; } * html #left{ height:100%; width:100px; } #right{ margin-left:100px; height:100%; background-color:Red; } * html #right{ height:100%; } </code></pre> <p><strong>Result in IE &amp;&amp; FF</strong><br> <a href="http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg" rel="nofollow noreferrer">Resutls in IE &amp; FF http://img139.imageshack.us/img139/9871/ie3pxgapnl4.jpg</a><br> The result is same with both IE 6 &amp; 7. How can I remove the gap between the divs?</p> <p><strong>Udate</strong><br> I have two divs each with 100% height. the left div is a fixed width floating div. Even after giving correct margin-left to the right div, there remains a gap (3px) between the two divs. Where as in firefox it renders correctly.</p> <p>The reason I have used quirk mode is to able to get 100% height for the divs</p> <p>Can this gap be eliminated? Or is there a better way to do two column 100% height layout with pure css?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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