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.

Assuming we have 3 DIVs – #wrap,#content and #sidebar the css would be as follows.

#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.

So, everyday it usually takes me close to an hour to wade through my RSS feeds and to be honest it can seem a bit of a chore. But today I remembered why I did it; There are some bloody clever people out there just waiting to share beautiful ideas with anyone who will listen.

Matt Everson of Astuteo is one of these people. He has created a CSS file (and accompanying images) that style a unordered list into a great looking, easy to use and easy to maintain sitemap. I just ran it through its paces and it seems fairy bug free (though will take some knocking into shape for IE6) and I can’t wait to use it.

Thanks Matt!

The answer could be over at http://squaregirl.com with just a few lines of CSS:

@media only screen and (max-device-width: 480px) {
  body {color:#000;}
}

As soon as I have a bit of time I am going to rectify this sites crappy handheld usability.

Great work!!!