Take the 2-minute tour ×

I'm trying to style blocks of code for a website. The container div is set to overflow both vertically and horizontally. The problem is when it overflows horizontally, the zebra-striped background-color is culled. I tried it with a background image as well but it culls that too. Why is it doing that and how do I fix it?


Image: http://zero.robotrenegade.com/q3w/background-overflow.png

Webpage (scale your browser width down to see the problem): http://zero.robotrenegade.com/q3w/code.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="created" content="">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script type="text/javascript">
            jQuery("pre code").html(function(index, html) {
                    return html.replace(/^(.*)$/mg, "<span class=\"line\">$1</span>")
.codeblock {
    max-height: 25em;
    overflow: auto;
    margin: 1em;
    border: 1px solid #ccc;
    font-size: 1em;
    line-height: normal;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.25);
.codeblock h1, .codeblock p {
    font-size: 1em;
    margin: 0;
    padding: 0em 1em 0.5em 3.5em;
    line-height: 2em;
    background-color: #eee;
.codeblock pre {
    margin: 0;
    padding: 0;
    font-face: 'lucida console',monaco,courier,'courier new',monospace;
.codeblock pre code {
    counter-reset: line-numbering;
    margin: 0;
    padding: 0;
.codeblock pre code .line::before {
    content: counter(line-numbering);
    counter-increment: line-numbering;
    padding-right: 0.5em;
    width: 4.5em;
    text-align: right;
    color: #888;
    border-right: 1px dotted #888;
    display: inline-block;
    background-color: #eee;
.codeblock pre code .line {
    display: block;
    margin: 0 0 -1.2em 0;
    line-height: 1.5em;
.codeblock pre code .line:nth-child(odd) {
    background: #f2f5f9;
/*.codeblock pre code .line:hover {
    background: #4b95e5;
    color: #fff;


<div class="codeblock"><!--<h1>Hello, this is an optional header.</h1>-->
<pre><code>void idAF::Restore( idRestoreGame *savefile ) {
    savefile->ReadObject( reinterpret_cast<idClass *&>( self ) );
    savefile->ReadString( name );
    savefile->ReadBool( hasBindConstraints );
    savefile->ReadVec3( baseOrigin );
    savefile->ReadMat3( baseAxis );
    savefile->ReadInt( poseTime );
    savefile->ReadInt( restStartTime );
    savefile->ReadBool( isLoaded );
    savefile->ReadBool( isActive );

    animator = NULL;
    modifiedAnim = 0;

    if ( self ) {
        SetAnimator( self->GetAnimator() );
        Load( self, name );
        if ( hasBindConstraints ) {

    savefile->ReadStaticObject( physicsObj );

    if ( self ) {
        if ( isActive ) {
            // clear all animations
            animator->ClearAllAnims( gameLocal.time, 0 );

            // switch to articulated figure physics
            self->RestorePhysics( &physicsObj );
<!-- <p>This is an optional footer, goodbye!</p> -->

share|improve this question
+1 for interesting question, pretty curious for the answer.. –  ptriek Dec 14 '11 at 23:52
if all else fails, you could of course always put a repeated background image (white/grey) on the .codeblock - that should be a pretty solid (though not very sexy) workaround. –  ptriek Dec 14 '11 at 23:58
@ptriek background image on '.codeblock' won't work since it won't scroll with the text, which defeats the point of zebra stripping. If anything, background image would be applied to either 'pre' or 'code', but then you end up with the same background culling issue. –  Obsidian Dec 15 '11 at 16:21
add comment

4 Answers

up vote 6 down vote accepted

Try float:left on the .codeblock pre. Works in Firefox.

<pre> fits itself inside the .codeblock container like there was no more room. float makes your <pre> element wide just enough to fit its content.


.codeblock pre {
    float: left;
    min-width: 100%;}

Works in Firefox, Opera, IE9 and WebKit

As far as I understand, it elements inside a container with overflow:auto fit themselves inside the area that's visible by default. Those elements' width:100% is only as wide as the outer container. In this example inside of the inner container you have a code tag that doesn't break lines so the text goes outside the inner container and makes the outer container show scrolls. To avoid that, you need the inner container to fit its content hence float:left.

But, as you cleverly noticed (and I didn't), this way it won't expand if the outer container is wider than the code so to avoid that you need to put min-width:100% to make the inner container use at least all the visible space inside the outer container.

share|improve this answer
ok, solves the problem - but creates a new one: width of the rows will not expand to 100% on a broader screen –  ptriek Dec 14 '11 at 23:50
now it works :) –  szym Dec 15 '11 at 1:38
that seems to work indeed, can you explain? –  ptriek Dec 15 '11 at 1:45
Updated. But to get complete understanding you should look at the w3 specification. –  szym Dec 15 '11 at 8:40
Oh, fantastic! Works perfectly. I've been staring at this problem for 2 days. –  Obsidian Dec 15 '11 at 16:39
add comment

Lines are expanding like every block element to the maximum width - and that is without overflow. And they are not connected - if one is bigger, it does not affect others.

Try changing them to something else than block element, like that:

.codeblock pre code .line {
    display: table-row;

Table-related types change width or height (cells) together


share|improve this answer
It's only good for firefox. No lack in opera or webkit. –  Litek Dec 14 '11 at 23:38
i confirm this won't work in webkit –  ptriek Dec 14 '11 at 23:52
add comment


.codeblock pre, .codeblock pre code {
  display: inline-block;

This worked for me in Safari.

share|improve this answer
same problem as @szym answer, background won't expand in broader browser –  ptriek Dec 15 '11 at 0:08
Yes, I forgot to go back and expand the browser. Sorry. –  Brett Pontarelli Dec 15 '11 at 0:14
add comment

Use a proper DTD format.it's good on firefox though...

share|improve this answer
What? <!doctype html> triggers standards mode, this is the best you can do. –  duri Dec 15 '11 at 15:00
add comment

Your Answer


