Today I got the chance to redesign a site I made for a client sometime ago. I have been having the same problem with it I had back then. The sites aims are to be simple and minimal BUT to have all content broken into individual pages/sections. This lead to some small pages and it looked odd. (Though I thoroughly agree with small and simple approach)

SO
I decided I would make a single page site with all content separated down the page but joined together with some pretty graphics and smooth JavaScript. I hit a problem.

I wanted the navigation to be fixed and on a 960px centred grid, with the navigation sat on the side on the content. I have to admit this got me stumped for a bit, but I figured out this way.

WARNING: This could be a crappy method.

#wrap {
	position: relative;
	width: 960px;
	margin : 0px auto;
}
#sidebar {
	position : fixed;
	top : 0px;
	left : 50%;
	width : 960px;
	padding-left : 235px;
}
#content {
	width : 700px;
}

A brief explaination.

The example all works off the assumption that the #content width is 700px and that we would want a 15px gutter between the elements. So as we are using a percentage to centre the DIV we know where the DIV will be — bang in the middle — and we need to work out how far to push it out. This is done by the simple calculation:

(700-(960/2))+15 = 235px

Yeah, I know, stupidly obviously simple. Just it had me hanging around for ages trying to solve. Just thought it could help someone else.