Set background colour for div with auto-scroll

Question

I have used two div tags in my blog to wrap programming codes. The first one is used to set outline box with fixed width with the following css class:

.outlinebox {
  width: 435px;
  border-width: 1px;        /* sets border width on all sides */
  border-style: solid;
  border-color: #666666;
  padding: 5px
}

The second div is used as inner box to set nowrap for codes with the class:

.nowrappercodesinner {
 width: auto;
 padding: 5px; 
 overflow: auto;
 white-space:nowrap;
}

I use those div tags for my codes in my blog. They work fine until I tried to add third div as inner area with a specific background colour. For example:

<div class="outlinebox"><div class="nowrappercodesinner"><class style=""background-color:#cccccc;">...</div></div></div>

The problem is that the background colour does not extend to the right when I move the horizontal scroll bar to the right. I am not sure if there is any way that the inner background colour will fill no matter where scroll bar is moved.

Here I have one example in my recent blog: Zip Files with PowerShell Script. You can see the problem in the third code block.

Answer 1

Hi David, an

overflow: auto;

in the innermost div might help. At least it had the desired effect when I added the property in Firebug. I find it strange, still, because I thought auto is supposed to be the default setting.

EDIT: Default value for overflow seems to be visible.

Answer 2

Perhaps I'm missing something, but why do you need the third div? Couldn't you just put the background color on the second div? I tried this on your blog in webkit's inspector and it displayed just fine.

<div class="outlinebox">
  <div class="nowrappercodesinner" style="background-color:#cccccc;"></div>
</div>