Expand div children to width of the canvas, not just the viewport?

Answer 1

If you don't mind a bit of jQuery, run the following code in Firebug on the nettuts+ website to fix the problem.

$('.dp-highlighter').each(function(){
  var container = $(this);
  if(this.scrollWidth !== $(this).width()) {
    container.children().each(function(){
      var child = $(this);
      var childPaddingLeft = parseInt(child.css('paddingLeft').slice(0, -2));
      child.width(container.get(0).scrollWidth - childPaddingLeft);
    });
  }
});

Edit: Seems to work in IE7/8 as well.

Further Edit: Here's the JavaScript necessary to fix the code you provided:

$('.syntaxhighlighter > div').each(function(){
  var container = $(this);
  if(this.scrollWidth !== $(this).width()) {
    container.find('.content').each(function(){
      var child = $(this);
      child.width(container.get(0).scrollWidth);
    });
  }
});

Demo

I've hosted your code on JS Bin with the JavaScript fix: http://jsbin.com/axeso

Answer 2

Just tested this and it seems to work, even way back to ie6.

#wrapper{width:300px; height:100px;border:1px solid black; overflow:auto;position:relative;}
#inner{width:auto;position:absolute;}
.content{white-space:pre;height:20px;width:auto;overflow:show;}
.alt {background:gray;}

<div id="wrapper">
<div id="inner">
    <div class="content">content content content content content content content content content </div>
    <div class="content alt">content content content content content content content content content </div>
</div>
</div>

The one downside is that you have to specify the height of the wrapper or the whole thing collapses vertically. You could use javascript to fix this though (wrapper height = number of content divs * height of a content div).