Doing things with percentages

[alexbass]

Hello everyone

I’m trying to make one of those websites where the sidebar is in a fixed position and the rest scrolls normally, like what was on Mark Jardine’s old website. (he’s changed it now)

It’s a really cool look, but I’ve never done anything like it, I’m more of a fixed width type-a-guy, so I’m not really sure what I’m doing. I’m using percentages (sidebar is 350px wide, scrolly thing is 100%). I’ve always been a bit skeptical with percentages, but I don’t know how else I can achieve maximum width without it flowing into the sidebar area (because that wouldn’t be “correct”).

So does anyone with experience on this kind of thing want to share a bit of their knowledge? Here is what I’ve done so far: http://jsbin.com/urayi3/2/edit (it took like 10 minutes, and excuse the scruffy-ness, I usually clean the document when I’ve completed it)

Thanks everyone

Alex

[DogsGhost]

this resolved what seemed to be the issues you were having, but a possible draw back with this solution is the width of the sidebar is no longer fixed, so it will expand/shrink with the browser width.

.side-div {
background:rgba(50,50,180,0.3);
position:fixed;
width:30%;
height:100%;
}
.home-div, .about-div, .portfolio-div, .contact-div {
width:70%;
height:100%;
margin-left:30%;
}

[Author]

Posts