Question

Let’s say I have a header:

header {
     background-color: $main-background-color;
     height: 86px;

            #headerContent {
               background-color: $main-background-color;
               height:86px;
               margin:0px auto 0px auto;
               width: $site-width;
            }
}

When a user logs in the header settings are changed to:

header {
    background-color: $main-background-color;
    position:fixed; 
    width:100%;
    height: 40px;

        #headerContent {
            position:relative;
            background-color: $main-background-color;
            width: $site-width;
            margin:0px auto 0px auto;
            height:40px;
                img {
                    margin-top:12px;
                }
        }

}

What I want to know is why does all my centering mess up if the header width is set to auto? I can only use %. Is this using the browser to determine what 100% is? When I use auto the header seems to disappear and i can only see my headercontent div which is then shifted to the left of the page.

I have it working now but would just like to understand what is going on.

Kind regards

Answer 1

Position fixed & absolute are default take content width & height. that’s why when you define auto it’s take it’s content width. It’s better to define left & right instead of width:100% for this. Like this:

header{
 right:0;
 left:0;
 position:fixed;
}