I created a simple template with common tags. It serves as a quick reference guide for my web development efforts. The web page renders great in Firefox, yet becomes a mess in IE. The HTML and CSS code validates on the server. You may view the template at the following link. http://neville.f2o.org/Template_noXML.html These tests relate to FireFox 1.0 and IE 6.0 on XP. Let me know if you encounter further deviations with your browser or OS platform. Top Button Firefox renders quick link to the top of the page as a relative float position at the bottom of the page. My top button moves as you scroll down the page. IE renders this div element at the bottom of the page; partially falling off the left side of the page. In addition, another mystery box appears at the top of the page within the MainContent container. Please let me know if you realize why this scenario occurs. http://neville.f2o.org/IE_top.html
You need to have a minimum width for the right hand div (It doesn't currently fit in an 800x600 browser window)... Also, position:relative; is not required when you're using floats. float: left/right is all you need in this instance.
Thanks for your response. > It doesn't currently fit in an 800x600 browser window What browser are you talking about? It has a minimum and maximum width to ensure that content stays on the MainContent container. Unfortunately, IE does not support minimum or maximum width. > Also, position:relative; is not required when you're using floats. Many people recommend using position: relative to hack IE bugs. I still have difficulty knowing when its relevant. Maybe, I am missing something here. Let me know if you clarify your suggestions further.