Why does the div on the right side enable the horizontal scrollbar?

Sninadsgady

New Member
What I want to achieve
  • Two overlapping background divs behind my centered text content.
    • One at the bottom left side of the text content div.
    • One at the top right side of the text content div.
    • Both should be a little bit behind the text content.
    • Both should be attached to the text div.
  • The horizontal scrollbar should be visible only if the window's width is less than \[code\]div.text\[/code\]'s width.
  • So additionally, If the two background divs go outside the visible area, they should not enable the horizontal scrollbar.
What I already haveProblemsNow, if I reduce the window width so that the blue and red boxes get outside the visible area, the horizontal scrollbar is displayed. However, if I set \[code\]display: none;\[/code\] on \[code\]div.right\[/code\], the scrollbar is not displayed.How do I get the desired functionality with \[code\]div.right\[/code\] too, so that if the blue and red boxes are cut off by the window frame, the horizontal scrollbar stays hidden? Is there a nice, cross-browser compatible solution for this?
 
Back
Top