Fixed left navigation + remaining space

Question

I'm trying to achieve the following with CSS: I want a fixed sidebar with navigation, so that when you scroll down, the sidebar stays in it's place. The remaining space on the right should be filled up with my content, as if it were the body at 100%.

However, my problem is that the right part takes exactly 300px more space on the right, resulting in a horizontal scroll bar.

I can't fid a solution on my own, can anybody help me? Thanks a lot! :)

JSFIDDLE: http://jsfiddle.net/ALGpP/4/

nav {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index:99;
}

#wrapper {
    overflow: hidden;
    position: absolute;
    width: 100%;
    margin-left:300px;
}

it always helps if you include a working example in http://jsfiddle.net — MightyPork, Jul 11 '14 at 22:14
You mean [like this?](http://jsfiddle.net/cuplizian/k72GX/2/) The different is the `.side` isn't `fixed` — Ian Mustafa, Jul 11 '14 at 22:19

Bas · Accepted Answer · 2014-07-11T22:45:42.553

Do you mean something like this?

I gave the #wrapper element some new CSS properties:

  height: 1200px;
  background-color: red;

The height: 1200px is in this case just for testing, to make the page longer.
The background-color: red is also just for testing to make it more visible.

Your nav element i have given the following css properties:

  height: 100%;
  width: 20%;
  position: fixed;
  background-color: green;

The height: 100% is used to make the element fill the page in the height
The width: 20% is used to make it 20% width.
The position: fixedis to make the element stick to a certain point at the page.
The background-color is used for testing, so you can see better what you're doing.

Also, i reccomend using a CSS reset. This is a really simple one im using in the fiddle:

* {
    margin: 0;
    padding: 0;
}

It basicly selects all elements and gives it a margin and padding of 0.

If you want the nav element to be 300px wide, use this fiddle.

Fix for the content that wasnt showing

Add the following properties to your #wrapper element:

width: calc(100% - 300px);
float: right;

So it looks like this:

#wrapper {
    width: calc(100% - 300px);
    height: 1200px;
    background-color: red;
    float: right;
}

Demo here

Percentage width would solve the problem, but I want a fixed with. Also, the content isn't visible in your fiddle :( — Wouter C, Jul 11 '14 at 22:37
Try this: http://jsfiddle.net/ALGpP/3/ it uses `px` as width. I know, fixing that now. — Bas, Jul 11 '14 at 22:38
That does it, thanks a lot! Also, thanks for introducing me to calc(), I had never heard of it. Very interesting! — Wouter C, Jul 11 '14 at 22:54

Fixed left navigation + remaining space

1 Answers1