Sent by Zoe M. Gillenwater on 2 August 2007 13:01
tsooki.com wrote:
> If I resize my browser so that I get a horizontal scroll bar, I'm
> noticing that when I scroll to the right, the banner at the top is cut off:
>
> http://www.mcparkandplanning.org/home.shtm
>
> I've tried many variations of auto, inherited and 100% widths on the
> various elements, and can't get it to work correctly.
>
> We don't want to get rid of the horizontal scroll bar, just make sure
> the top banner and toolbar are always maximum width. We also don't want
> to use overflow:hidden with our content. We just want to make sure that
> the top bar is always maximum page width.
>
> Is this a bug? Any ideas?
>
Laurence,
No, this is not a bug. Divs aren't like tables -- they won't
automatically stretch out to hold their contents. The content is allowed
to overflow out the sides or the bottom. Your attempts to make them do
so using width: 100% merely make the divs match the width of the
viewport, which is not what you want -- you want them to extend past the
width of the viewport when content inside them does.
To force divs to stretch to hold their content regardless of the width
of the browser window, you can try playing around with the float
property or the table display values. However, in your case, it seems
like an appropriate min-width is all you need, since the content inside
your page is fixed in width. Your content is 985px wide, so a min-width
of 1000px on the wrapper would be a good place to start. You'd need to
adjust widths inside accordingly.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
