CSS “overflow” culls “background-color”

Question

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 zebr

Answer 1

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.

UPDATE

.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.

Answer 2

Try:

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

This worked for me in Safari.

Answer 3

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

http://jsfiddle.net/D7rND/

Answer 4

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

Answer 5

I just added {float:left} to the div's whose backgrounds were being "culled" in my situation.

With this change the backgrounds and borders would extend with the overflowed text. So as I scroll horizontally the text is displayed uniformly with the same background and borders.

Before adding this piece of css, the background/border would not overflow beyond div, although the text would.