What is CSS?

CSS stands for Cascading Style Sheets. It is a means of
styling your html markup. It should not be used to add content to
your page, because any content added in this way would not be
rendered by browsers not supporting CSS properly or at all.

When combined with CSS, your structured html markup will take
on a new appearance, allowing you to specify colors, sizes and
weights for all of a document.

Remove all the other styles. The problem is not with
font-family and font-style. Keeping 1KB of that stuff is only
going to make your job of sifting through style sheets more
difficult.

Use background colors for the various divs you are trying to
position/float. This will make it clear to you where the divs
are, and how much space (width/height) they occupy.

Test in a good browser. Mozilla or firebird is highly
recommended. Download it from one of the links provided in the
left-hand bar at http://www.mozilla.org/. I personally use Opera
7.21. But don't use IE because it has poor CSS support.

Try to use bare-bones content. Focus on whats wrong with the
way the site displays. If #left and #middle overlap, focus on
them... forget that #right exists for the time being. Sort out
issues one at a time.

ALWAYS BACK UP YOUR WORK AS YOU GO ALONG. So that if you go
too far away and can't get back to the place you started, you can
start over with one of your backed-up copies.

Remember: Things that were easy with tables may not be equally
easy with CSS. Things that were impossible or too difficult with
tables may be straightforward. Think outside the box. View your
page consisting of several divisions... almost like cutouts on
the paper... you can then glue these individual cutouts on a
canvas. You couldn't think in this manner with tables... but with
CSS you can!! The following link might be useful in
debugging:

Of course there is not an iota of doubt that you cannot and
should not ignore IE. But the thing is that if you have a problem
with the way a page displays, you should use a
standards-compliant browser.

Why? Because when something doesn't quite go right, you would
want to refer to published documents (read W3C recommendations)
to understand what a specific command is supposed to do. And if
the browser doesn't confirm to these specs, well that would leave
you confused.

If you place a div within a positioned div, and give it
position: absolute; then this div should be positioned with
respect to the containing div. Right? Thats what the specs say,
thats what you'd think should happen.

But no, IE has a bug. What if these divs contained menu and/or
images? Unless you are an expert (and most of us aren't), you
wouldn't know if its a browser bug or problem in your
thinking.

Hence, I would use Firebird to get the CSS problems sorted.
Once thats done, I will view this in IE. I will then try to find
possible reasons for the way IE displays it, and then think of
workarounds.

The whole point is that once you have narrowed down where
exactly the problem might be, you get in a position to ask
specific questions, and are in a much better position to get help
quickly.