HTML & CSS: Can't make div inside of larger fixed, 100% width div, scrollable on overflow

Question

I'm working with a piece of HTML similar to this:

<div id='headerBar'>
    <div id='headerBarContent'>
        <div id='leftContentSubdiv'></div>
        <div id='rightContentSubdiv'></div>
    </div>
</div>

With CSS like this:

#headerBar
{
    position: fixed;
    left: 0px;
    right: 0px;

    min-width: 1024px;
    width: 100%;
    height: 34px;

    z-index: 10000;
}

#headerBarContent
{
    display: inline-block;

    position: absolute;
    left: 50%;
    margin-left: -512px;

    width: 1024px;
}

#leftContentSubdiv, #rightContentSubdiv
{
    position: relative;

    width: 512px;
    height: 34px;
}

What i'm trying to create is a header bar that scrolls vertically along with the page, and that scrolls horizontally when the window is smaller than the headerBarContent's width, without the use of JavaScript.

Facebook implements it exactly as I specified, without the use of JavaScript.
Twitter implements it with JavaScript
The Onion illustrates where I'm stuck at now. The page is unable to scroll the header bar horizontally with the rest of the page once the window size is smaller than the header's centered content

I can't figure out what exactly Facebook is doing in the markup have this functionality. Can anyone help?

Looks like it is working perfectly now... have you fixed it? What web browser are you using? — Ryan, Dec 08 '11 at 16:37
Agreed. Not sure exactly what you are looking for but I find no differences between the behavior of the Facebook and Onion toolbars. — David Brainer, Dec 08 '11 at 16:41
@Ryan, are you sure it's working? Sure, it can scroll vertically with the page, but does the header bar scroll horizontally with the rest of the page when you resize the window to a width of less than 1024px? It doesn't for my example and The Onion (that's where I'm stuck). I develop using Opera. — Kevin, Dec 08 '11 at 16:42
For me in Chrome, Firefox and IE9 Facebook and the Onion have the same behavior with me. Maybe I haven't really understood what you want then? Or maybe it's Opera causing the problem? Have you tested it in any other browser? — Ryan, Dec 08 '11 at 16:46
You can't scroll a `fixed` element in the way you are wanting. The whole point of it is that it does not move when the window moves. You can use Javascript to achieve this effect. See this stackoverflow answer: http://stackoverflow.com/a/4676352/681807 — My Head Hurts, Dec 08 '11 at 17:30

stecb · Accepted Answer · 2011-12-08T16:47:25.067

1

If I correctly understand your problem, if the screen is < 1024px (headerBarContent) you want the header position to be relative.. right? (like Facebook)..

You could achieve this without JS by media queries i.e. :

@media screen and (max-width: 1024px){
    #headerBar{
        position:relative;
    }
}

demo http://jsfiddle.net/BPcfB/

edited Dec 08 '11 at 16:47

answered Dec 08 '11 at 16:41

stecb

14,478
2
50
68

The fiddle doesn't appear to work for me in Chrome sorry mate, well not for what is being looked for from my understanding – Ryan Dec 08 '11 at 16:48
Just tried.. it's working here in Chrome (15).. try to resize the 'result' panel to see the behav – stecb Dec 08 '11 at 16:50
Yes, it appears as though horizontal scrolling is allowed, but vertical scrolling with the page is disabled once the position is changed to "relative" in Firefox and Chrome – Kevin Dec 08 '11 at 16:53
Yon can set whatever style u want inside `@media screen and (max-width : 1024)` ...it's a condition basically, if the screen is less than 1024, overwrite the style of @headerBar :) – stecb Dec 08 '11 at 16:56
Sorry dude, I just realized that you're only working on the horizontal behavior! I was looking at the vertical behavior also that isn't addressed in your answer, he also want's the bar to be fixed when you scroll down the page from what I understood and when I scrolled down the bar went with the text out of view. – Ryan Dec 08 '11 at 16:56
@stecb: Yea, I can see it acts as a conditional, however I can't figure out what to put in there that enables this functionality. Putting "relative" disables the vertical scrolling of the header, and setting the width of the header to 1024 or less doesn't cause a horizontal scrollbar to appear. – Kevin Dec 08 '11 at 17:02
but I can see the horizontal scrollbar... don't u see it? – stecb Dec 08 '11 at 17:04
@stecb: Yes, when the "position" is modified in the media query, the horizontal scrollbar appears and I am able to use it. However, since "position" is no longer "fixed", the headerBar no longer scrolls vertically with the page. I'd like to retain that ability. Modifying the headerBar's "width" instead of "position" in the media query does not induce overflow for the page, since the position is still "fixed". – Kevin Dec 08 '11 at 17:19
but, on Facebook if I have the horizontal scrollbar, the header is relative so it doesn't scroll along with vertical scrolling..that's why I can't understand what u want to achieve – stecb Dec 08 '11 at 17:25
@stecb: NEVERMIND. It seems as though Facebook acts the same way. I guess if none of these sites can retain the ability to vertically scroll, when the position is changed, then it's not possible. – Kevin Dec 08 '11 at 17:26
It s possible by keeping position fixed ;) but u ll always have the fixed element.. No matter the window size. – stecb Dec 08 '11 at 18:31

HTML & CSS: Can't make div inside of larger fixed, 100% width div, scrollable on overflow

1 Answers1