508423 - Resizing the window breaks the header/footer layout

Status: VERIFIED WONTFIX

(Websites :: creative.mozilla.org, defect)

Description

[krupa raj[:krupa]]

Attachment: header

Steps to reproduce:

1.Navigate to MCC homepage
2.resize the window
3.Scroll to the end of the page


observed behavior:
header and footer layouts look broken(fixed width CSS?)

Comment 1

[krupa raj[:krupa]]

Attachment: footer

Comment 2

[Craig Cook (:craigcook)]

This is the expected built-in browser behavior.

The body element is sized to the window, but its contents have a fixed width that may overflow the window. When overflow occurs, the browser produces scrollbars but doesn't expand the containing elements horizontally around the content (the content overflows its box according to spec). The background image/color doesn't continue outside the window area, even though the content does. You can scroll to see the content but the background gives a visual indicator of where the container ends and the overflow begins.

Using overflow-x: hidden; prevents horizontal scrolling, but that means the content is hidden in small windows as well, which is almost certainly unacceptable. A fully-liquid layout does evade the issue because the content simply never overflows horizontally, but this isn't a liquid design. 

So unfortunately this is pretty much unfixable without altering the design and rethinking things for liquidity. It's preferable for the main content area to remain readable in horizontal scrolling scenarios, even if the header and footer appear broken.

Comment 3

[raymond [:retornam] (inactive)]

Resolving as a wont fix based on comment #2 (In reply to comment #2)
> This is the expected built-in browser behavior.
> 
> The body element is sized to the window, but its contents have a fixed width
> that may overflow the window. When overflow occurs, the browser produces
> scrollbars but doesn't expand the containing elements horizontally around the
> content (the content overflows its box according to spec). The background
> image/color doesn't continue outside the window area, even though the content
> does. You can scroll to see the content but the background gives a visual
> indicator of where the container ends and the overflow begins.
> 
> Using overflow-x: hidden; prevents horizontal scrolling, but that means the
> content is hidden in small windows as well, which is almost certainly
> unacceptable. A fully-liquid layout does evade the issue because the content
> simply never overflows horizontally, but this isn't a liquid design. 
> 
> So unfortunately this is pretty much unfixable without altering the design and
> rethinking things for liquidity. It's preferable for the main content area to
> remain readable in horizontal scrolling scenarios, even if the header and
> footer appear broken.

Comment 4

[krupa raj[:krupa]]

verified based on comment 1