How to make nav and right block fixed, also keep the whole container is in center?

Question

How to make nav and right block fixed, also keep the whole container centre center? without using js http://jsfiddle.net/zujg22st/9/

I know position fixed is fixed to browser not to parent, so it can't be simply using fixed in relative div like position absolute


    nav
    
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el

Skyler Jokiel · Accepted Answer

So what we're going to want to do here is separate the this into two parts. We'll create a header at the top of the page and a body with a fixed right div. The nav bar at the top we can make a fixed header like so:

CSS:

#header{
    position:relative;
    height:30px;
    width:400px;
    margin: 0 auto;
}

HTML:

nav

The body will look like:

HTML:


    
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
        left-el
    
    right

CSS:

#header{
    position:relative;
    height:30px;
    width:400px;
    margin: 0 auto;
}

.centerheader{
    width: 400px;
    margin: 0 auto;
    position:relative;
}

.center {
    width: 400px;
    background-color: red;
    margin: 0 auto;

}
.nav {
    position:fixed;
    width: 400px;
    height: 30px;
    background-color: yellow;
}
.left, .right {
    width: 150px;
    display: inline-block;
    vertical-align: top;
}
.left {
    background-color: green;
}
.right {
    position:fixed;
    background-color: blue;
    height: 40px;
}

.right {
    margin-left: 3px;
    position: fixed;
}

body{
    margin: 0 auto;
}

As a side note I modified the underlying body {margin: 0 auto;}. In jsfiddle there's a margin around the body and it causes ugliness when you have a header.

FIDDLE

How to make nav and right block fixed, also keep the whole container is in center?

Answers (2)

Related Questions