CODEWITHSUNDEEP
htmlcss
Kevin
Kevin

Reputation: 2697

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

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.

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

Upvotes: 2

Views: 952

Answers (1)

stecb
stecb

Reputation: 14746

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/

Upvotes: 1

Related Questions