CSS Positioning - Agrivating Results

I keep reading how GREAT CSS is but I think it SUCKS!!!

I have been going bonkers trying to figure out how to do what I want in CSS rather than do it the easy way with tables. If I can't get some help that actually let my page do what I want I think I will be forced to go back to tabular format.

My page is here.
My CSS is
here.

I've got the banner and the menu working fine. The look great.

But now I'm working on the main content of the page.
I want to have three different sections.


The three divs are news, calendar, and main
I want news and calendar to be on top with the main underneath both. What I wont always know is how much content is in either the news or the calendar. Sometimes the news section will be longer sometimes the calendar section will be longer. But in either case I want the Main section be be BELOW BOTH sections on the page.

At first I could get it to work when the news div had more content. But not if it had only a small amount of content. So I posted on this site
here. . Well it worked well enough after that. Not perfect but at this point I'll just be happy if things aren't overlapping eachother.

So now I went back and added more content to the news section and it doesn't work. Now the Main section rides up and under the calendar section.

WHY WHY WHY????

Someone PLEASE prove to me that CSS is worth all of this agrivation.

I don't care how "good" CSS is supposed to be if I can do it with tables and NOT with CSS then what is the point???

Give your #calendar and #news section a width. I see you've clear:ed both the left and right float in the main section; I suggest you also float it to the left <i>after</i> you've cleared the other two.

The frustration is only temporary. Once you get used to all of this, it's easier and a lot less coding.

I didn't want to give my news section a width so that it could adjust to whatever the width of the persons browser was set to.

I tried adding the float left to the main div...

And whooo... it made that div have just one word per line.

See why I don't like this... NOTHING ever does what you expect or want it to do.

If you really want to have it work like it's suppose to, you should first read the W3C's CSS recommendation and then get a browser that conforms to those specifications (Mozilla). Only then can you type something and have it come out like it's suppose to. I don't have any problems until I have to go back through and rework the CSS so that it appears correctly in messed up browsers (like IE).

Float the calendar and the news to the left, set a width for the calendar. Clear and reset a left float for the main. The news section should expand width-wise until doing so would conflict with the width you've set for the calendar.

http://www.w3.org/TR/CSS21/cover.html#minitoc
http://mozilla.org

http://glish.com/css