CSS Width Greater then Page Width without Horizontal Scroll (overflow:hidden not an option)

Posted by Anders H on Stack Overflow See other posts from Stack Overflow or by Anders H
Published on 2010-04-14T20:18:10Z Indexed on 2010/04/14 20:23 UTC
Read the original article Hit count: 309

Filed under:
|
|

I've got a basic layout going in 960.gs. One line of text is absolutely positioned, starting within an inner DIV and exiting only the right side of the page.

Here's a screenshot: screenshot

The issue is that as the text appears as a series of unbroken words, if the width of the text box doesn't extend beyond the end of the page, it breaks some distance from the edge.

  1. overflow: hidden; doesn't do the trick because I need to set the width wider than the page.
  2. float won't work because the text can't escape the width of the inner DIV.
  3. I can't set it outside the inner DIV and just position it there as the same problem will still exist.

The code is basically as simple as:

<wrapper (containing) DIV>
   <text stripe DIV>
      <p></p>
   </text stripe DIV>
</ wrapper DIV>

I know I've done something like this before and I can't for the life of me remember what I ended up doing.

Thanks.

© Stack Overflow or respective owner

Related posts about css

Related posts about css-layout