hackathon web page displays strangely

[James E Keenan]

http://act.qa-hackathon.org/qa2015/main

In Firefox, at least, all the pages on this site are displaying in a
strange way. Each page has a left sidebar with internal links and a
right sidebar with sponsors. But the main content for each page only
starts to appear *below* the end of the longer of the two sidebars.
Unless and until you scroll down past the sidebars, each page appears
void of content.

[Shlomi Fish]

Hi James,

This appears to happen if and only if the browser's viewport window is too
narrow. If I make it wide enough, the page displays fine. For what it's worth, I
can reproduce a similar behaviour in the Google Chromium browser.

Regards,

Shlomi Fish

--
-----------------------------------------------------------------
Shlomi Fish http://www.shlomifish.org/
Humanity - Parody of Modern Life - http://shlom.in/humanity

The more money Chuck Norris comes across, the less problems he sees.
— http://www.shlomifish.org/humour/bits/facts/Chuck-Norris/

Please reply to list if it's a mailing list post - http://shlom.in/reply .

[Tina Müller]

Hi James,

Yes, I can see that with a small window. On mobile phones of
course too.
I suck at CSS, happy for any ideas =)
First I could try is to decrease the min-width of the inner
div.

thanks,
tina

[James E Keenan]

On 03/21/2015 09:45 AM, Shlomi Fish wrote:
> Hi James,
>
> On Sat, 21 Mar 2015 08:51:42 -0400
> James E Keenan <jk...@verizon.net> wrote:
>
>> http://act.qa-hackathon.org/qa2015/main
>>
>> In Firefox, at least, all the pages on this site are displaying in a
>> strange way. Each page has a left sidebar with internal links and a
>> right sidebar with sponsors. But the main content for each page only
>> starts to appear *below* the end of the longer of the two sidebars.
>> Unless and until you scroll down past the sidebars, each page appears
>> void of content.
>
> This appears to happen if and only if the browser's viewport window is too
> narrow. If I make it wide enough, the page displays fine. For what it's worth, I
> can reproduce a similar behaviour in the Google Chromium browser.
>
> Regards,
>
> Shlomi Fish
>

True. I see that in Firefox we now have both "Full Zoom" and "Text
Zoom" settings which can be adjusted up or down independently of each
other. It is the combined effect of certain settings of each that
causes the text in the viewport to be placed way at the bottom. I can
adjust that combination to make the text in the viewpane visible at the
top of the page.

But it just so happens that that combination works well (for me) on
other web pages, so when I wanted to go to act.qa-hackathon.org, the
display that immediately came up was what I reported. So, a less than
satisfactory user experience.

Thank you very much.
Jim Keenan

[Lasse Makholm]

On Sat, Mar 21, 2015 at 3:26 PM, Tina Müller <cp...@tinita.de> wrote:

Hi James,

On Sat, 21 Mar 2015, James E Keenan wrote:

http://act.qa-hackathon.org/qa2015/main

In Firefox, at least, all the pages on this site are displaying in a strange way.  Each page has a left sidebar with internal links and a right sidebar with sponsors.  But the main content for each page only starts to appear *below* the end of the longer of the two sidebars. Unless and until you scroll down past the sidebars, each page appears void of content.

Yes, I can see that with a small window. On mobile phones of
course too.
I suck at CSS, happy for any ideas =)

I would:

• Make sponsors a child of wrapper, after menu, so you get:
• outer
• berlin
• wrapper
• menu
• sponsors
• content
• footer
• Menu floats left, sponsors floats right.
• Don't float content and don't set a width on it. Let it expand and shrink with the window.
• On content, set margin-left to width of menu + a bit to avoid left margins on content collapsing into the menu. If you don't, e.g. list items on http://act.qa-hackathon.org/qa2015/wiki will not indent properly.

If you do this, the page should respond a lot better to different window sizes. For very narrow windows, the content will still eventually get pushed down below the sidebars. But to avoid that you probably have to start making a "proper" responsive layout by applying CSS rules selectively using media queries on window size, but that's probably not worth the effort here...

/L

[Tina Müller]

I got another solution from Bjoern:
#content { width: calc(100% - 450px) }

which I chose since it was easier than the one from Lasse ;-)

Works for me on chrome and FF (also on my phone)

thanks,
tina

[James E Keenan]

On 03/23/2015 02:08 PM, Tina Müller wrote:
> I got another solution from Bjoern:
> #content { width: calc(100% - 450px) }
>
> which I chose since it was easier than the one from Lasse ;-)
>
> Works for me on chrome and FF (also on my phone)
>

WFM

Thanks for taking the time to investigate this.
jimk