views:

17

answers:

1

This is a test case:

<!doctype html>
<html>
<body>
    <div style="margin: 0 auto; width: 950px; overflow: hidden;">
        <div style="float: left; width: 660px">
            <form><fieldset>
            <pre style="overflow: auto">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test </pre>
            </fieldset></form>
        </div>
        <div style="float: right; width: 260px">
            Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. 
        </div>
    </div>
</body>
</html>

I want the code in <pre> to show a scroll bar instead of overflowing into the "Lorem Ipsum" sidebar. If it's in a <fieldset> (as in the example) it overflows.

If you remove the <form><fieldset> it won't overflow anymore, but it won't show the scrollbar either (the overflowed text is simply clipped).

Here is what I want:

  • If the text in the <pre> is longer than the available width it shouldn't overflow into "Lorem Ipsum" and it should show a scroll bar, whether it is in a <fieldset> or not.
+1  A: 

It is obeying it, but in the context of it's default behavior. It doesn't have a width currently, and the default behavior of a <pre> is to not have a width (but rather to expand into available space...and it's parent is willing to expand to accommodate it) so it's acting correctly.

If you want it to fit, just give it the same width as the parent, like this:

<pre style="overflow: auto; width: 660px;">
Nick Craver
Thanks, this works, but it still doesn't have a scrollbar. =(
norepro
@norepro - Is this example not working for you? http://jsfiddle.net/nick_craver/B4srq/ If not, which browser are you seeing this in?
Nick Craver
@Nick: I'm using the latest version of Firefox (3.6.8); I tried with chrome too, and with chrome it works.
norepro
@norepro - I think this may be as consistent as you'll get (with just CSS) cross-browser: http://jsfiddle.net/B4srq/1/ This *always* shows the scrollbar though.
Nick Craver
This is weird.. Oh well, thanks for your help!
norepro