title: CSS issue - I want the client area totally filled
body: <p>I really struggle with CSS. I am trying mod a sliding door technique that opens onto a full-client area div, but I just cannot get the full client area filled up. I am modding from here:</p>
  
  <p><a href="http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/" rel="nofollow">http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/</a></p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Title&lt;/title&gt;
  &lt;style type='text/css'&gt;    
      .box_container{
          position:relative; /* important */
          width:100%; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
          height:100%; /* important */
          /*min-width: 100%;*/
          /*min-height: 100%;*/
          overflow:hidden; /* hide the content that goes out of the div */
          /*just styling bellow*/
          background: black;
          color:white;
      }
      .images_holder
      {
          width: 100%;
          height: 100%;
          position:absolute; /* this is important, so the div is positioned on top of the text */
      }
      .image_div {
          position:relative; /* important so we can work with the left or right indent */
          overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
          width:50%; /* make it 50% of the whole images_holder */
          height: 100%;
          float:left; /* make then inline */
      }
      .right img{
          margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
      }
      .clear{
          clear:both;    
      }
  &lt;/style&gt;
  &lt;script type='text/javascript' src='js/jquery.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
      $(document).ready(function () {
          var cv, box, holder, cvContext, width, height, my_gradient, boxHeight, boxWidth;
  
          //        box = document.getElementById("box");
          //        boxWidth = box.offsetWidth;
          //        boxHeight = box.offsetHeight;
  
          //        holder = document.getElementById("imageHolder");
          //        holder.width = boxWidth;
          //        holder.hieght = boxHeight;
  
          box = document.getElementById("box");
          //$("box").css({ width: $(window).width(), height: $(window).height() });
          $("box").css({ width: window.innerWidth, height: window.innerHeight });
          $("imageHolder").css({ 'min-width': window.innerWidth, 'min-height': window.innerHeight });
  
          cv = document.getElementById("canvas1");
          width = cv.width;
          height = cv.height;
          cvContext = cv.getContext("2d");
          my_gradient = cvContext.createLinearGradient(0, 0, width, height);
          my_gradient.addColorStop(0, "blue");
          my_gradient.addColorStop(1, "white");
          cvContext.fillStyle = my_gradient;
          cvContext.fillRect(0, 0, width, height);
  
          cv = document.getElementById("canvas2");
          width = cv.width;
          height = cv.height;
          cvContext = cv.getContext("2d");
          my_gradient = cvContext.createLinearGradient(0, 0, width, height);
          my_gradient.addColorStop(0, "blue");
          my_gradient.addColorStop(1, "white");
          cvContext.fillStyle = my_gradient;
          cvContext.fillRect(0, 0, width, height);
  
          //when the user hovers over the div that contains our html...
          $('.box_container').hover(function () {
              //... we get the width of the div and split it by 2  ...
              var width = $(this).outerWidth() / 2;
              /*... and using that width we move the left "part" of the image to left and right "part"
              to right by changing it's indent from left side or right side... */
              $(this).find('.left').animate({ right: width }, { queue: false, duration: 300 });
              $(this).find('.right').animate({ left: width }, { queue: false, duration: 300 });
          }, function () {
              //... and when he hovers out we get the images back to their's starting position using the same function... '
              $(this).find('.left').animate({ right: 0 }, { queue: false, duration: 300 });
              $(this).find('.right').animate({ left: 0 }, { queue: false, duration: 300 });
              //... close it and that's it
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!--START THE MAIN CONTAINER--&gt;
  &lt;div id="box" class='box_container'&gt;
  
          &lt;!--START THE IMAGE PARTS HOLDER--&gt;
          &lt;div id="imageHolder" class='images_holder'&gt;
  
              &lt;!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION--&gt;
              &lt;div class='image_div left'&gt;&lt;canvas id="canvas1" style="width:100%; height:100%;"/&gt;&lt;/div&gt;
              &lt;div class='image_div right'&gt;&lt;canvas id="canvas2" style="width:100%; height:100%;"/&gt;&lt;/div&gt;
  
              &lt;!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW--&gt;
              &lt;div class='clear'&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!--END THE IMAGE PARTS HOLDER--&gt;
  
          &lt;!--START THE TEXT--&gt;
          The text underneath
          &lt;!--END THE TEXT--&gt;
  &lt;/div&gt;
  &lt;!--END THE MAIN CONTAINER--&gt;  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Instead of the small thin strip, how can I get the panels covering the entire client area of the screen?</p>
  
  <hr>
  
  <p>OK, I have tried to simplify, and remove all css, so everything is done in code behind. I am using the viewport as suggested. But nothing seems to work. In fact it does not even recognise the hover anymore.</p>
  
  <p>What am I doing wrong? Why can't I seem to change any widths, heights etc onload? Why has my hover stopped working?</p>
  
  <p>Please help.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;!--Note this doctype is essential to recognise canvas--&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Dual sliding door effect with one Image&lt;/title&gt;
  &lt;script type='text/javascript' src='js/jquery.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
      function MyOnLoad() {
          var cvContext, my_gradient;
          var width, height, widthWin, heightWin, widthDoc, heightDoc, widthMain;
          var divBox = document.getElementById('divBox');
          var divHolder = document.getElementById("divHolder");
          var divUnderneath = document.getElementById("divUnderneath");
          var divDoorLeft = document.getElementById("divDoorLeft");
          var divDoorRight = document.getElementById("divDoorRight");
          var canvas1 = document.getElementById("canvas1");
          var canvas2 = document.getElementById("canvas2");
  
          widthWin = $(window).width();   // returns width of browser viewport
          heightWin = $(window).height();   // returns width of browser viewport
          widthDoc = $(document).width(); // returns width of HTML document
          heightDoc = $(document).height(); // returns width of HTML document
  
          width = widthWin;
          height = heightWin;
  
          divBox.style.width = width;
          divBox.style.height = height;
          divBox.style.background = "#AAFFAA";
          divBox.style.position = "relative";
          divBox.style.overflow = "hidden";
          divBox.style.color  = "#FFFFFF";
  
          divHolder.style.width = width;
          divHolder.style.height = height;
          divHolder.style.background = "#AAAAFF";
          divHolder.style.position = "absolute";
  
          divUnderneath.style.width = width;
          divUnderneath.style.height = height;
          divUnderneath.style.background = "#FFAAAA";
  
          divDoorLeft.style.position = "relative";
          divDoorLeft.style.overflow = "hidden";
          divDoorLeft.style.width = Math.round(0.5 * width);
          divDoorLeft.style.height = height;
          divDoorLeft.style.float = "left";
  
          divDoorRight.style.position = "relative";
          divDoorRight.style.overflow = "hidden";
          divDoorRight.style.width = Math.round(0.5 * width);
          divDoorRight.style.height = height;
          divDoorRight.style.float = "left";
          divDoorRight.style.marginLeft = -width;
  
          canvas1.width = Math.round(0.5 * width);
          canvas1.height = height;
          cvContext = canvas1.getContext("2d");
          my_gradient = cvContext.createLinearGradient(0, 0, canvas1.width, canvas1.height);
          my_gradient.addColorStop(0, "blue");
          my_gradient.addColorStop(1, "white");
          cvContext.fillStyle = my_gradient;
          cvContext.fillRect(0, 0, canvas1.width, canvas1.height);
  
          canvas2.width = Math.round(0.5 * width);
          canvas2.height = height;
          cvContext = canvas2.getContext("2d");
          my_gradient = cvContext.createLinearGradient(0, 0, canvas2.width, canvas2.height);
          my_gradient.addColorStop(0, "blue");
          my_gradient.addColorStop(1, "white");
          cvContext.fillStyle = my_gradient;
          cvContext.fillRect(0, 0, canvas2.width, canvas2.height);
  
          //when the user hovers over the div that contains our html...
          var d = $("divBox");
          $("divBox").hover(function () {
              //... we get the width of the div and split it by 2  ...
              var width = $(this).outerWidth() / 2;
              /*... and using that width we move the left "part" of the image to left and right "part"
              to right by changing it's indent from left side or right side... */
              $(this).find('divDoorLeft').animate({ right: width }, { queue: false, duration: 300 });
              $(this).find('divDoorRight').animate({ left: width }, { queue: false, duration: 300 });
          }, function () {
              //... and when he hovers out we get the images back to their's starting position using the same function... '
              $(this).find('divDoorLeft').animate({ right: 0 }, { queue: false, duration: 300 });
              $(this).find('divDoorRight').animate({ left: 0 }, { queue: false, duration: 300 });
              //... close it and that's it
          });
      }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#FF0000"&gt;
  &lt;div id="divBox"&gt;        
          &lt;div id="divHolder"&gt;
              &lt;div id="divDoorLeft"&gt;&lt;canvas id="canvas1"/&gt;&lt;/div&gt;
              &lt;div id="divDoorRight"&gt;&lt;canvas id="canvas2"/&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div id="divUnderneath"&gt;
              Looks nice doesn't it :)
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>