Is it possible to align two DIVs side by side if one is fixed?

Question

I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!

FIDDLE

Answer 1

I tried to write this code and it is responsive too.

* {
    padding: 0px;
    margin: 0px;
}
#one {
    float: left;
    position: fixed;
    width: 25%;
    background: #666;
    height: 100%;
}
#two {
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    left: 25%;
    right: 0%;
    float: right;
    width: 75%;
    background: #333;
}

I hope this helps.

Answer 2

When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .

so the following CSS :

#one {
    float: left;
    position: fixed;
    width: 25%;
    background: #666;
    height: 100%;
} 

25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .

with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :

margin-left: // DO YOUR MATH.

padding-left: // DO YOUR MATH.