fixed half column while other half scrolls

Question

I am trying to figure out how to do something which is quite hard to explain. I have set up a test here

When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.

What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do

.project {
    float: left;
    width: 50%;
}

This now displays the images how I want them to display.

However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.

How can I make the change I am after whilst keeping the left section the same?

Thanks

Have you tried setting the right column's position to `relative`? Please add some more code or a JSFiddle: http://www.jsfiddle.net — A.Sharma, Apr 08 '16 at 12:49

UndoingTech · Accepted Answer · 2016-04-08T14:09:45.440

2

Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.

I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.

Edit1: I also added width: 49%;.

New picture:

Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.

To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.

According to Chrome's developer tools, this should be added around styles.css, line 3238.

nav > ol, nav > ul {
    display: flex;
    flex: wrap;
}

Note: this will work for at least both inline-block and block child elements.

edited Apr 08 '16 at 14:09

answered Apr 08 '16 at 13:10

UndoingTech

709
3
16

Thanks, works perfectly :-) One thing I am trying to work out is the 49%. When set to 50 it falls onto a new line. This looks like it is to do with some tiny padding/margin somewhere. I cant seem to find where this is though. Do you see where this padding is coming from? Thanks – katie hudson Apr 08 '16 at 13:24
@kate_hudson That is a by-product of `inline-block`. If there is space between the elements in the HTML, then there will be a little space between the elements when you see them on the browser. If you [google](https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=get%20rid%20of%20space%20between%20inline-block%20elements) this issue, you'll see a lot of well working but tacky ways to get rid of the space. The spaces look nice here though, IMHO. – UndoingTech Apr 08 '16 at 13:29
@kate_hudson This is the best solution if have come across: [How to remove the space between inline-block elements?](http://stackoverflow.com/a/20074565/4663968). According to caniuse, it will work well for everything except IE. – UndoingTech Apr 08 '16 at 13:33

score 1 · Answer 2 · answered Apr 08 '16 at 13:00

1

You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to

.chapter .chapter__title {
    position: fixed
}

That should resolve

answered Apr 08 '16 at 13:00

James King

1,897
11
16

fixed half column while other half scrolls

2 Answers2