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; }
Improve this question
5
  • possible duplicate of Fixed positioned div within a relative parent div Commented Aug 12, 2014 at 1: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 Commented Aug 12, 2014 at 2:03
  • so now you are visiting my profile and downvoting all of my correct answers. Awesome! :) Commented Aug 12, 2014 at 2:09
  • ?? what are you talking about Commented Aug 12, 2014 at 2:12
  • nothing, forget it, peace.. Commented Aug 12, 2014 at 2:12

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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.
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 and I'll update inline above.
-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

Improve this answer

2 Comments

Thanks for reply! I know div cannot be set position fixed in relative parent, because position fixed is to screen.
Did you tried the DEMO? I think it's close enough of what you want.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.