I have a CSS template that is perfect in internet explorer but is out of place in firefox.

the site is: http://www.underoathfans.net/delete

The stylesheet links is:

http://www.underoathfans.net/delete/style.css


What do i change to correct this error and keep it looking how it does in internet explorer?

Thanks
Adam

I recommend that you start by fixing the HTML errors reported by our online validator.

In what way is it "out of place" in Firefox? I don't see anything obvious (other than the way the content is squished into the middle of the page by the fixed-width design, and the way my browser has to enforce its minimum font size).

I will focus on the html errors afterwards.

I mean about the footer being underneath the sidebar and not below both the main and sidebar boxes. and the border around the container is cut short though it has no set height?

What is it i can do to fix this?

Why are you using "position: relative" ?

Anyway, it looks like Firefox has it right. Everything in your <div id="block"> is floated, which takes it out of the normal flow, so your <div id="block"> doesn't take up any vertical space.

Then your <div id="foot"> comes along and displays in the space available to it.

It sounds like you want something to "clear: both" at the bottom of your <div id="block"> (to stretch the bottom of that element below the two floated div elements inside it).

I have limited CSS experience. Could you possibly tell me what I would have to change to fix this? A temporary fix so that i can learn would be greatly appreciated. Thanks, Adam.

Before the closing </div> tag for your <div id="block"> add

Thank you!

Sorry for the late rpely.