0

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

<div class="center">
    <div class="nav">nav</div>
    <div class="left">
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <!--..... a lot ->
    </div>
    <div class="right">right</div>
</div>

css

.center {
    width: 400px;
    background-color: red;
    margin: 0 auto;
}
.nav {
    width: 400px;
    height: 30px;
    background-color: yellow;
}
.left, .right {
    width: 150px;
    display: inline-block;
    vertical-align: top;
}
.left {
    background-color: green;
}
.right {
    background-color: blue;
    height: 40px;
}
user1775888
  • 3,147
  • 13
  • 45
  • 65
  • possible duplicate of [Fixed positioned div within a relative parent div](http://stackoverflow.com/questions/7846161/fixed-positioned-div-within-a-relative-parent-div) – aniskhan001 Aug 12 '14 at 01:55
  • 2
    @aniskhan001 possible not duplicate. I never asking to css fixed positioned div within a relative parent div. in my demo the layout is just for understanding what i want. and seems the answer is like below Skyler Jokiel answer. I can't understand is when you can't understanding my question and still give a incorrect answer, people give you downvote, then you just remove that, then you tagged this is duplicate? this is so weird – user1775888 Aug 12 '14 at 02:03
  • so now you are visiting my profile and downvoting all of my correct answers. Awesome! :) – aniskhan001 Aug 12 '14 at 02:09
  • ?? what are you talking about – user1775888 Aug 12 '14 at 02:12
  • nothing, forget it, peace.. – aniskhan001 Aug 12 '14 at 02:12

2 Answers2

2

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:

<div id="header">
    <div class="nav">nav</div>
</div>

The body will look like:

HTML:

<div class="center">
    <div class="left">
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
        <div class="left-el">left-el</div>
    </div>
    <div class="right">right</div>
</div>

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

Skyler Jokiel
  • 318
  • 2
  • 11
  • 1
    Thanks it seems like what i want!! but have few question: 1.how to make space between left and right? 2. if the window size small than 400px the blue box will overlay the left. – user1775888 Aug 12 '14 at 01:56
  • 1
    Sorry about that. I did it quick. Here I optimized your #2 by throwing the right column back in. You can add a space now by modifying 'margin-left' in '.right{}' Here is the new [FIDDLE](http://jsfiddle.net/8wd39mkx/) and I'll update inline above. – Skyler Jokiel Aug 12 '14 at 05:40
-1

A child div cannot be fixed relative to it's parent. But here's what I've got so far. I think it will help you.

Set position: fixed; to the .nav. Add same amount of margin-top as .navs height to both .left and .right. In this case it's 30px. Then set position: absolute; the .right div.

DEMO

aniskhan001
  • 7,981
  • 8
  • 36
  • 57