kate_hudson kate_hudson - 11 days ago 4
CSS Question

fixed half column while other half scrolls

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?



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:

New Edited content screenshot

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.