You're using an HTML5 DocType and you should know there is limited support for much that HTML5 has to offer. There are a couple workarounds to get the basics working in though, have a look here
It looks like you have a little divitis
going on. Why nest #content inside #wrapper when it does nothing that #wrapper can't already do?
You should also learn about the box model
. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.
Your p#header, for example, is actually 780px wide. Instead of splitting that header up into two columns and using floats, you use positioning to put one layer on top of another. That can bury links under another element and make them inaccessable.
Your links in #navigation might
actually work if you used absolute positioning (too much relative positioning like you're doing rarely works as intended). See positioning here
But why use positioning at all? If you let the document flow naturally it all falls into place and is much a cleaner/easier code. See the pitfalls of absolute positioning
An an example of a simple 2 column layout
, since that's what your site is.
As it is now, #wrapper is the element that is layered over top of your left column links. Remove the negative z-index from #wrapper and it will uncover your links.
See about z-index and stacking orders here
- again, it's really not needed for your layout.