CSS: fixed div next to relative div

Question

I'm trying to make a fixed div adjacent to a scrolling div, such as Fixed div next to a centered div asks. I've looked at that one and Fixed div next to parent div, but it doesn't seem to work on what I'm doing. Here's the code for what I'm working on (without any code for what I'm trying to make): http://jsfiddle.net/Firedrake969/dbLt9/

I've tried

float:left;

but it doesn't work with

position:fixed;

Also, on a tangent, the background div, as it is fixed, does not let you scroll the page.

Doing that gives white space when I scroll: http://prntscr.com/49zewa — Firedrake969, Aug 06 '14 at 01:32
possible duplicate of [Fixed position div scrollable](http://stackoverflow.com/questions/18894400/fixed-position-div-scrollable) — Brett Holmes, Aug 06 '14 at 01:37

score 1 · Accepted Answer · answered Aug 06 '14 at 06:33

1

FIDDLE here
^ Above is the updated link of your code.

Discuss:
You don't need to define height and position in #back div. Just remove them from CSS. You may see an automated margin added by the browser itself. To override this set margin: 0; to the body.

Also on your #intro div you are using top: 20px; which makes this div overflowing it's parent. Instead you can just use margin-top: 20px;

answered Aug 06 '14 at 06:33

aniskhan001

7,981
8
36
57

Thank you! What about making the Menu div stay next to the center column? Another example would be something like this: http://barungbiru.neocities.org/ (try resizing it) – Firedrake969 Aug 06 '14 at 13:35
It still leaves white space, but in a different area: firedrake969.github.io – Firedrake969 Aug 06 '14 at 14:14
I'm not seeing any white-space on your website. – aniskhan001 Aug 06 '14 at 16:24
Yeah, I fixed it. Any ideas about my first problem? (Keeping the menu div next to the centered column) – Firedrake969 Aug 07 '14 at 00:47
Set a width on the `#back` div and float `#intro` to the right. Currently you are hiding the menu using JS. – aniskhan001 Aug 07 '14 at 00:55

Yevgeniy Afanasyev · Answer 2 · 2014-10-29T23:12:24.520

Please, try it.

jsfiddle

or, maybe you wanted this: jsfiddle

#top {
    text-align:center;
    background: aliceblue;
    position: fixed;
    width:100%;
    top:0;
    height: 30px;
}
#menu {
    background-color:#8F8E94;        
    font-size:35px;
    margin-top:30px;
}

<div id='top'>Welcome!</div>
<div id='menu'>
Menu <br>
Lorem ipsum dolos accusata pericula. Nonumy saperet alienum per ne, an nam mutat autem, vel diam evertitur sadipscing eu. Errem graece cotidieque an pri. Per et idque populo luptatum.
<br>
Lorem ipsum dolos accusata pericula. Nonumy saperet alienum per ne, an nam mutat autem, vel diam evertitur sadipscing eu. Errem graece cotidieque an pri. Per et idque populo luptatum.
<br>
Lorem ipsum dolos accusata pericula. Nonumy saperet alienum per ne, an nam mutat autem, vel diam evertitur sadipscing eu. Errem graece cotidieque an pri. Per et idque populo luptatum.
<br>
Lorem ipsum dolos accusata pericula. Nonumy saperet alienum per ne, an nam mutat autem, vel diam evertitur sadipscing eu. Errem graece cotidieque an pri. Per et idque populo luptatum.

</div>

CSS: fixed div next to relative div

2 Answers2