I decided it was time to move my largest website away from using a table layout to a div layout. But I ran into some problems. Spend hours yesterday trying to figure it out, I am just frustrated now so I am asking for a new set of eyes to help me see what is wrong.

I am trying to make a 2 column fluid layout with header, footer, and navigation rows. I have everything working except the columns. I just can't get them to appear right.

Here is the "sample" page I made. I left the css within the page for now so you can see the entire code.
http://www.usmchangout.com/sample.htm

I am trying to get the layout to look like my main page: http://www.usmchangout.com except without tables (well in the new layout I am adding a footer).

What in the world did I do wrong? Any help would be greatly appriciated.

Take the 1em padding OFF of #main and #sidebar and you solve 1 problem.
Zero out the margins and padding on the body is also recommended to level the playing field for other elements.

You have #container, but it has no styles applied to it.

Thank you, that solved it. But now there is a tiny space between the two columns. Any idea how to remove that and also have both flow down together so they both fill out and touch the footer, no matter how much text is in either one?

Also the container part. I guess I could remove that, but just leave the div tags? Or do I not even need that?

The only reason I put it there was a trial and error as I was searching last night on ways to fix it. I just googled fluid css layouts, and some had those in there but it was not defined in the css.

It's not a bad idea to leave the #container in there, it holds the sidebar and your content area. I only mentioned it because people often put in divs and then forget to style them.

For the space between the sidebar and the content, use a little 'deception' - put a white background on #container and no one will see any gaps. You'll also need to clear your floats in order for the container to 'enclose' everything':
http://css-discuss.incutio.com/?page=ClearingSpace

Thank you so much! That link was very helpful. I played around with it some more and I think I have just about got it.

So my headache is gone........for now, lol.

Glad to help
You need to look at it in Firefox, something's amiss, the page appears blank. Make sure you validate your code.

You've got a few other minor issues in the top section in Firefox too.

Ok I will check. Hopefully it won't be much of a headache, lol.

I'll check it out after I take a little break.

Well I fixed the logo, moved the google ads back to under the header. So all of that is showing correctly in both ie and ff. IE still looks great, but FF pushes the sidebar down and I can't figure it out.

I know where the validation errors are coming from. I have a mod installed for vbulletin to show the log in box on non vbulletin pages. That's just a matter of editing the php file to see if I can get it to validate. Shouldn't be too hard once I figure out the FF issue.

Any ideas?

Well I took a break and ate dinner (which is apparently what I needed) came back to it and it hit me right in the face, lol. I have it all fixed now. Looks great in IE 7.0 and FF. Whewwwww. Now to get to validating that php file so the whole page will validate. Thanks again LadynRed! It was a headache but I learned a lot, which to me is the most important thing!