Advanced CSS: can I float right with cropping on the left?

January 2, 2007 11:02 PM

I want to float a css element to the right and have the left side get cropped when I shrink the window size.

(Self link example) View that link in Firefox and you'll see the left side of the page disappear as you make the window smaller, with no scrollbars.

View it in Safari or IE6 (though IE6 has other more serious problems too) and the left side of the element fixes against the side of the browser, causing horizontal scrolls to appear.

Any thoughts? I also wrote this code example to simplify the issue, and I see the same problem:

Response by poster: Bah. My code sample worked in preview. Sorry.
posted by jragon at 11:04 PM on January 2, 2007

Have you tried setting the overflow CSS attribute to hidden on #paperBG?

Doing a quick google, I find a good comparison to your problem here.
posted by thanotopsis at 1:10 AM on January 3, 2007

Validate your CSS and HTML.
posted by kirkaracha at 6:25 AM on January 3, 2007

Response by poster: Yeah, I've done all sorts of overflow testing, with no success.

I hadn't considered clears, I can try that now.
posted by jragon at 8:15 AM on January 3, 2007

Best answer: Huh. This design makes me feel much less special, but at least I have a reference point to see how it works:

http://foxie.ru/

She probably did a display:hidden on the body and used a body BG image for the window on the left.

I'll mark this as best answer since the answer is in that site's css somewhere.
posted by jragon at 10:19 AM on January 3, 2007

Response by poster: Er, overflow:hidden, not display:hidden.
posted by jragon at 10:19 AM on January 3, 2007