the sidebar is displayed at the bottom of the page in IE. in firefox it looks ok, anyone got a suggestion to how to fix this?
the page is www.rusereplays.com
My css skills and understanding is beginner level. so im not sure where to start in fixing this, any debug tools i should acquire that wold help me in this kind off situations?
If you're using IE 8 hit F12 for the developers tool.
Since you're in quirks mode, specifying width and padding requires that you give the box model a thought.
To make things easy, drop the padding-left for #content. You don't have to explicitly specify a gutter as long as you have a width specified for both the floating blocks.
You need to fix the validation errors. CSS applied to broken HTML is far more unpredictable. Many errors will disappear if you provide a doctype (preferably HTML4, since you don't appear to have written XHTML), but there are definitely some nesting/unclosed element errors there.
Also, lose the frameset wrapping the page. It will have significant negative effects: Impossible to bookmark pages, poorer search engine ranking, refreshing a page takes you back to the home page.
Get Firebug for firefox, also use a program like Dreamweaver or any other of these will do to help with your coding. If you're using Chrome, press CTRL+J for the developers tool, in IE8 hit F12. But Firebug for Firefox is great.
Also, when it comes to IE vs FF, if there are differences in layout, try to use things called Conditional Comments. They will allow you to differentiate between all the different versions of IE and FF/Chrome/Opera/Safari etc.