[CSS] evaluate my style sheet, and layout problems

Hi!

I've been trying to layout my site using css and a minimal of tables.

I'm still new to CSS and ahve been following online tutorials and trying to get snipets of code from reference sites.

Could you take a look at my Style Sheet and my source? Am I coding it properly? Is there a better way of doing something? Make it more compatible with other browser (so far I've only tested it with IE).

Home page
Style Sheet

Some specifics questions I have are:

1. Here you can see that the menu floating on the right bleeds through its container. I tried to put a spacer div there, the right menu will fit into the container with no bleeding, but there will be empty space the length of the left menu before the right menu shows. Is there a technique to have the right menu fit there properly?

2. Here you can see that main (white part) div, there are individual 'posts'. They're all aligned properly, until they reach pass the left menu, then the 'post' divs begins to align more to the left. This happens throughout the site whenever anything in the content div extends pass the left menu. What's happening there?

3. I'm trying to set up a thumbnail gallery, I was going to use float: left; for each image to line them up. I've given up with that and have gone back to tables, because when I tried that it looked weird, period. I thought putting a spacer div there would help, but I got the same problem as in 1. Here is the gallery page. Any idea how I can do this with CSS?

Thanks ALOT for taking the time to read this. ANY help is GREATLY APPRECIATED!

Chap

I skimmed through your stylesheet and noticed a few things that can be written with a little less code right off.

Any time you have a border that spans all for sides, just use "border" instead of "border-left", "border-right", etc.On the same lines, I noticed that a few places you specify the border for just three sides. You can write that in two lines like this:The above will place a border on the top, right, and left of the element.


The rest I think is a misunderstanding of the box model. Let's take your left nav menu. (I didn't look exactly, this is just what I think is going on). The container has a specific width, we'll say 200px. Then you put another div in there and give it a width of 200px and a border width of 1px. This makes that element's total width 202px. That's 1px + 400px + 1px. B/c of that, the element exceeds the container's width and pops out of it. This is how containerships should look:This also applies to any padding and/or margins you give to an element. An element's total width is

Another helpful site: http://glish.com/css