No you just need to use the correct css for browsers that adhere to standards more than ie does
will I have to write a seperate index.html just for Mozilla?
To centre an element you need to use margin:auto on an element with a specified width. More explicitly you need margin-left:auto and margin-right:auto (which means adjust the margins so that they are equal therefore centreing the element that has a width defined).
Unfortunately IE5 and 5.5. use text-align:center in a parent element in order to center so you need to use both for cross-browsers compatability.
Also you have used to floats in your #main element and have given then widths of 50% and left margins of 2px each. An elements width can only be 100% so how can you expect to fit 2 x50% + 4px inside it .
Therefore you need to increase the size of #main to accomodate this. IE works beacause it doen't obey the rules and stretches #main to fit the content. (It treats width as though its min-width.)
Here is the code to make it display in mozilla.
You would still be better of using px for your floats or if you are using % then use % for the margin also. In this way you can add them up correctly. You can never make %+px = 100% (not exactly anyway).
border:1px dashed #000000;
Once you've done that you should clear out the inline styles as they are almost as bad as tables. You want all your styles in one place in an external sheet preferably.
One last thing is that you will need to add clear:both to your last div on the page so that the content starts on a new line:
You should remove that inline style to the head of the document and you can also get rid of those unnecessary spans and apply the classes to the surrounding divs instead. (Then validate your code to finish tidying up )
<DIV STYLE=width:100%;clear:both> <SPAN CLASS=heading>/END_DATA <IMG SRC=image/heading.GIF><IMG SRC=image/heading.GIF></SPAN>
If you need more help then I suggest you post in your own thread so that we don't hi-jack frost's thread
Hope that helps.