SuzyUK - 11:35 am on Mar 20, 2011 (gmt 0)
it's Sunday freebie time ;)
You were doing well, the site is lovely. as for the annoying road block, it's a fairly common one that people reach, floats and clearance and full length column effect nightmares are in your near future.
first off, when going to floated layouts it can be quite hard to get over the sliced images method of building a site, so you need to approach it a little differently, because your first img (250 x 250) is floated left then the second element involved (sidenav) also floats left but clears, the next floating element, your 600 x 150 image will also clear, no float can be higher than a predecessor.. so the second image is not going any higher than the nav list
so if I may I'll give you an alternative way with notes to explain the various bits, that will solve your jigsaw problem, reorder the source so the content is first (just a nice aside, no particular reason, except screen readers and bots will get the content first) - this way will also enable you to use a full length repeating effect on the wrapper background so the next hurdle you would reach (filling the background in between the sidenav and the footer) can also be jumped.
You will need to make yourself one more image, 850px wide and 2-10px high, you can chop a cutting from the top of your footer background image - you need the full 850px width with the two side shadows, doing this, another aside is that you will then not need the right column background!
summary, two columns ..
the first 600px wide floated right, second 250px not floated.. second will sit to the left of the main one.. the footer clears both the above and holds the bottom effect. stretching the wrapper background behind both columns regardless of which is longest. All three of these are inside your wrapper div.. the background I just asked you to make repeats down the wrapper div, so it doesn't matter which side is longest the effect runs full length.
Your two header images will hide the top of the wrapper background giving your top effect, and the footer background does the same for the bottom.. nice rounded corners and shadows all intact
instead of being side by side, the two "header" images sit at the top of their respective columns and could still be linked to the home page, if you think it's imperative that come together in the source you could position the photo image.. ask later if you want to do this.. I think they're Ok like this and each gives a nice start to your divisions
I've added lots into the notes, especially a header replacement for the "photos" heading this is to help show how to use non-empty elements to get the effects you want.. i.e. try to use existing ones, or ones that are likely to have a use in the future (e.g. the footer div) I changed the sidenav to a list, as that is the usual way to mark up a menu, I also added the full width hover effect to the links to show you the benefits of using lists
I left in an extra navigation wrapper around the lists, this may seem unnecessary, but it is actually controlling the margins/width of the available content area in the sidenav.. that way if you ever want to add anything else, aside from a navigation list into the sidebar just put it in it's own classed div and it's good to go at 100%;
removed a bit of unnecessary padding: 0; margin: 0; rules, divs do not have padding or margins by default so they're not required, unlike h2, lists and p's so you'll see where I've put them or left them in it's because they are doing something, in which case I've zero'd them then readded where necessary. the body element especially i.e I have duplicated rules, but I often do it like this anyway as a reminder that zeros are actually resetting
code is long, because of notes so I'll put in next post
remember it'll look like it's got sticky out bits until you put that new image on the background of the wrapper div
have a nice weekend