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,

On Sat, 21 Mar 2015 08:51:42 -0400

Post by 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.

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

[James E Keenan]

Post by Shlomi Fish
Hi James,
On Sat, 21 Mar 2015 08:51:42 -0400

Post by 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.

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

[Tina Müller]

Hi James,

Post by 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.

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

[Lasse Makholm]

Post by Shlomi Fish
Hi James,
http://act.qa-hackathon.org/qa2015/main

Post by James E Keenan
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

Post by Shlomi Fish
First I could try is to decrease the min-width of the inner
div.
thanks,
tina

[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

Post by Shlomi Fish
Hi James,

Post by 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.

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]

Post by Tina Müller
#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