title: Expand div children to width of the canvas, not just the viewport?
body: <p>Sorry if this is a dup; I haven't found any questions that pose quite this same problem.</p>
  
  <p>The issue is illustrated by this screenshot, ironically taken from <a href="http://nettuts.com/html-css-techniques/solving-5-common-css-headaches/" rel="nofollow noreferrer">a CSS blog site</a> (it's immediately below the text "In order to set a positioning context".)  I've been hitting the same issue in my own code.</p>
  
  <p>About halfway down this image, there's a line with a long comment that forces the enclosing <code>div</code> to provide a horizontal scrollbar (via the <code>overflow: auto</code> setting.) As shown in the screenshot, the surrounding lines with gray backgrounds don't stretch to fill the entire width of the parent's canvas. Instead, they remain fixed at the width of the parent's <strong>viewport</strong>. (Those backgrounds belong to <code>div</code>s that enclose individual lines of text.)</p>
  
  <p>I see this in Firefox 3.1 and IE8 (regardless of IE7 compatibility mode.)</p>
  
  <p>Is there any cross-browser method to force those child <code>div</code>s to stretch to the full width of the canvas (or put another way, to set their widths to the max width of their peers)? My guess is "no", or the site's author would be using it.</p>
  
  <p><a href="https://i.stack.imgur.com/NafHA.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NafHA.jpg" alt="alt text"></a><br>
  <sub>(source: <a href="http://outofwhatbox.com/images/nettuts-css.jpg" rel="nofollow noreferrer">outofwhatbox.com</a>)</sub>  </p>
  
  <p><strong>EDIT</strong>: Here is a bare-bones example. For some reason, the scrollbar doesn't show in IE, but it does show in Firefox 3.1 (and with the same behavior that I'm seeing elsewhere.)</p>
  
  <pre><code>Note: The CSS shown here is derived from SyntaxHighlighter
  (http://alexgorbatchev.com/), released under GPL 3.
  
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;sample&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  
  .syntaxhighlighter .line.alt1 .content {
      background-color:#FFFFFF !important;
  }
  
  
  .syntaxhighlighter .line .content {
      color:#000000 !important;
      display:block !important;
      font-family: "Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
      font-size: 12pt;
      font-weight: 400;
      color: #000000;
      white-space: nowrap;
  }
  
  .syntaxhighlighter .line.alt2 .content {
      background-color:#F0F0F0 !important;
  }
  
  .syntaxhighlighter {
      background-color:#E7E5DC !important;
      margin:1em 0 !important;
      padding:1px !important;
      width:497px !important;
      height: auto !important;
  }
  
  .line {
      overflow:visible !important;
  }
  
  .lines {
      overflow-x:auto !important;
  }
   &lt;/style&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  &lt;div class="syntaxhighlighter" &gt;
    &lt;div class="lines"&gt;
      &lt;div class="line alt1"&gt;
        &lt;span class="content"&gt;
          &lt;span style="margin-left: 0px ! important;" class="block"&gt;
            &lt;code class="plain"&gt;this is line 1 &lt;/code&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="line alt2"&gt;
        &lt;span class="content"&gt;
          &lt;span style="margin-left: 20px ! important;" class="block"&gt;
            &lt;code class="plain"&gt;this is line 2&lt;/code&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="line alt1"&gt;
        &lt;span class="content"&gt;
          &lt;span style="margin-left: 40px ! important;" class="block"&gt;
            &lt;code class="plain"&gt;this is a very very very very very very long line number 3&lt;/code&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="line alt2"&gt;
        &lt;span class="content"&gt;
          &lt;span style="margin-left: 0px ! important;" class="block"&gt;
            &lt;code class="keyword"&gt;this is line 4&lt;/code&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="line alt1"&gt;
        &lt;span class="content"&gt;
          &lt;span style="margin-left: 20px ! important;" class="block"&gt;
            &lt;code class="plain"&gt;and this is line 5.&lt;/code&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong> 2009/05/14: Here's the script that I've deployed, based on <a href="https://stackoverflow.com/questions/815443/expand-div-children-to-width-of-the-canvas-not-just-the-viewport/815549#815549">brianpeiris's answer</a> below. In case anyone's interested, here's a <a href="http://www.outofwhatbox.com/blog/2009/05/fixing-a-scroll-where-the-grays-came-in/" rel="nofollow noreferrer">more detailed description</a> of the changes that were needed.</p>
  
  <pre><code>// Ensure that each content &lt;span&gt; is sized to fit the width of the scrolling region.
  // (When there is no horizontal scrollbar, use the width of the parent.)
  fixContentSpans : function() {
      jQuery('.syntaxhighlighter &gt; div.lines').each(function(){
          var container = jQuery(this);
          var scrollWidth = this.scrollWidth;
          var width = jQuery(this).width();
          var contents = container.find('.content');
          jQuery(contents).each(function(){
              var child = jQuery(this);
              var widthAvail = 
                  scrollWidth - parseFloat(child.css("margin-left"))  
                  - parseFloat(child.css("padding-left"))
                  - parseFloat(child.css("padding-right"));
              var borderLeft = parseFloat(child.css("border-left-width"));
              // IE uses names (e.g. "medium") for border widths, resulting in NaN
              // when we parse the value.  Rather than trying to get the numeric
              // value, we'll treat it as 0. This may add a few additional pixels 
              // in the scrolling region, but probably not enough to worry about.
              if (!isNaN(borderLeft)) {
                  widthAvail -= borderLeft;
              }
              child.width(widthAvail);
          });
      });
  },
  </code></pre>