CODEWITHSUNDEEP
htmlcss
exk0730
exk0730

Reputation: 733

Overflow content background-color not expanding

I'm not entirely sure what I'm doing wrong, but the background-color of some divs are not expanding the way I want them to. Here's a fiddle to demonstrate

https://jsfiddle.net/9kxxcc04/

<body><div><pre style="background-color: red">A LOT OF CONTENT THAT OVERFLOWS</pre></div></body>

Basically I have some div/pre blocks with overflowing content and I want their background colors to be the same the entire width of the div that they're in.

Thanks!

Upvotes: 0

Views: 3227

Answers (3)

Darshit Hedpara
Darshit Hedpara

Reputation: 670

Just remove this line from actual-content class

left: 0;
right: 0;

And remove overflow:hidden from body.

Upvotes: 1

TheHamstring
TheHamstring

Reputation: 732

pre is a block level element and as such won't extend beyond it's container in this case. If you swap the display style to inline-block then you will get the background to overflow with the text. At least from what I understand from the fiddle.

Upvotes: 1

dom_ahdigital
dom_ahdigital

Reputation: 1681

Add this CSS and I think it will fix the wrapping:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Upvotes: 0

Related Questions