Results 1 to 5 of 5

Thread: Content background cut off

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    221
    Thanks
    43
    Thanked 1 Time in 1 Post

    Default Content background cut off

    Scroll to the right and you'll see the background is truncated:

    Code:
    div {
      width: 300px;
      overflow: auto;
    }
    
    p {
      background: green;
    }
    
    <div>
      <p>ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    
    </div>
    DEMO

    Why does it happen? What's the solution?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

    Default

    Hi there Rain Lover,

    here is one possible solution for you to try...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    <title>untitled document</title>
    <!--<link rel="stylesheet" href="http://www.codingforums.com/screen.css" media="screen">-->
    <style media="screen">
    div {
        width: 18.75em;
        background: #008000;
        overflow: auto;
     }
    p {
        white-space: nowrap;
     }
    </style>
    </head>
    <body> 
    <div>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
      posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
      Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
      sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc.
     </p>
    </div>
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Apr 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello,

    I agree with your solution and I suggest you this code. Add a CSS rule to ensure that your body element is at least as wide as the fixed-width area of your site. Something like:
    Code:
    body {
        min-width: 980px;
    }

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    Rain Lover, the background is truncated because with your code the HTML paragraph element itself is truncated. It is not wider than 300px, whereas the pixel-width corresponding to the length of the string inside the p-element is around 1100px.
    All styles (except 'text-css') for the p-element will be affected by this: styles for background, borders, box shadow etc.
    Truncation will not happen if you give the p-element a pixel-width corresponding with the length of the string. In this case: 1100px, see above.
    But there's a much easier method: put your styles (for ex.: background: green) in the parent of the p-element, just like coothead did.

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    There's yet another way to avoid 'truncation': just give the p-element display: inline-block. This (too) will produce what you want, for some reason. Code:
    Code:
    <style>
    
    div {
    width: 300px; overflow: auto; 
    }
    
    p {
    background: green;  display: inline-block; 
    }
    
    </style>
    
    <div>
    <p >ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.ThisIsSomeText.</p>
    </div>

Similar Threads

  1. Re-sizing Background + Content
    By CollinsGA in forum CSS
    Replies: 0
    Last Post: 04-18-2012, 06:46 PM
  2. Replies: 0
    Last Post: 06-05-2008, 02:03 AM
  3. DD Accordion glitch with content background
    By atomicpicnic in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-19-2008, 08:33 AM
  4. Replies: 2
    Last Post: 01-05-2007, 02:19 PM
  5. background images for scrollable content 2?
    By carsick in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-26-2005, 04:39 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •