Revisited for IE compatibility

I have been working a rounded content box approach. The layout rendered beautifully in Firefox, yet IE threw a wrench into my layout. The approach has to be re-thought and aligned for compatibility with IE. The HTML and CSS code validates on the server.

The situation may relate to the Box Model Hack, but I have little familiarity with the various workarounds and hack techniques. My questions relate to improving my current approach and incorporating any hacks if necessary. The layout no longer renders properly in Firefox since adding the width property to the following classes.

div.ArticleHeader
div.ArticleHeader div
div.ArticleFooter
div.ArticleFooter div

My round content approach began from the following article:

http://www.redmelon.net/tstme/4corners/

My idea involved an approach, which could incorporate numerous content box graphics; just like using tables. The content box could be square with one corner angle or rounded corner; outlined, embossed, etc.

The redmelon approach uses a div wrapper containing the divs for the top, content, and bottom. My approach removed this div wrapper, which may be the first indicator. Let me simplify my questions.

Would you recommend adding a wrapper around the content box beside the ID (navigation) wrapper?

What Box Model hack would you recommend for my layout?

How does the width property affect my content boxes? If I comment out the width, the layout renders in Firefox; IE still fails to render it. The #navigation container has a fix width; yet the #maincontent container has a min-width and max-width. Tricky!

Why does the graphic, in div.ArticleFooter, extend the full width of #Navigation container? The class has a margin of 20px. The parent container also has a margin of 20 px?

IE renders the whole layout as a mess. Once these content boxes address the box model, then I could continue addressing other IE issues like the fieldset, pre, and floats. Some people have mentioned other approaches, but I prefer fixing this approach before move on to a better method. It helps me to learn the idiosyncrasies behind CSS and browser implementation. In addition, it helps me when aligning the other CSS style with IE. Please give suggestions and lead me in the right direction.

http://neville.f2o.org/Template_Sample.html

 

Try this method out instead. It's a little more sturdy.

http://www.vertexwerks.com/tests/sidebox/