653137 - wiki.mozilla.org stylesheet broken so that the main content ends up below the sidebar

Status: RESOLVED FIXED

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

Description

[Boris Zbarsky [:bzbarsky]]

In my case, the window width minus the scrollbar width is 924px.

The wiki.mozilla.org stylesheets plus the Gecko default stylesheet give us the following styles:

1)  Body has 8px each left and right margins and an 880px min-width.
2)  #main has 3% left padding and 6% right padding.
3)  #wiki-tools has a 15% max-width (which it nearly hits in my case, because
    the "Log in / create account" text is long).
4)  #main-content has a 77% width 40px left margin and 15px each of left and
    right padding.

So in my ase, 924-16 = 908 > 880, so the body ends up with a width of 908px; things would be even worse if I hit that min-width.

To fit inside the body we have 3% + 6% + (15% + 77%)*93% + 40 + 2*15.

That's 94.56% + 70px.

This means that any time 70px > 5.44% of the body width, the #main-content won't fit next to the #wiki-tools and will get pushed down instead.

70px > 5.44% if and only if 1286.7647px > 100%.

So in other words, any time the body width is smaller than 1287px things won't fit on this page.

Recall now that the actual body width here is the bigger of 880px and "window width - 31px".  So this site breaks any time the browser window is narrower than 1318px, in general.  You might get lucky with your fonts and have the sidebar land at less than 15% width, which will give you more leeway.  But it certainly breaks at about 1000px wide for me.

Instead of using "77%" we should probably use "-moz-calc(85% - 70px)" for the #main-content width.

Comment 1

[Aryeh Gregor (:ayg) (no longer with Mozilla)]

Or just use -moz-box-sizing: border-box.  That probably has better cross-browser support.

Comment 2

[Milos Dinic [:Milos]]

Fixed on stage in r102122/r102112 

http://viewvc.svn.mozilla.org/vc/projects/wikimo/trunk/skins/gmo/style/screen.css?r1=102112&r2=96449

Jake, please push to prod.

Comment 3

[Milos Dinic [:Milos]]

Sorry,

correct revisions are r102111/r102112.

Comment 4

[Jake Maul [:jakem]]

Hi Milos,

Could you please commit this fix to tags/production here:

http://viewvc.svn.mozilla.org/vc/projects/wikimo/tags/production/

That's what the production wikimo uses. Thanks!

Comment 5

[Milos Dinic [:Milos]]

Sure, done in r102142.