Free: Remaking DMXzone in CSS and XHTML

Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!

The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!

3 Column layout

All the boxes are placed in a 3 column layout with a header above it. In our old design we were already using 3 divs for the left/center/right content. There are many different 3 column designs based on css, but our new layout is largely based on http://www.positioniseverything.net/thr.col.stretch.html.

The 3 divs from the old layout were templated like this:

    ##header##
    <div id="leftcontent">
     ##leftcontent##
    </div>
    <div id="centercontent>
     ##subheader##
     ##content##
    </div>
    <div id="rightcontent">
     ##rightcontent##
    </div>
    ##footer##

When working on the new design we used a lot of techniques (see the reference links at the end of the document) to get the perfect layout for DMXzone. The following HTML was the result (the content is removed so you can see clearly the structure of the divs).

    <div id="contentholder">
     <div id="header">
      ##header##
     </div>
     <div id="leftcontent">
      ##leftcontent##
     </div>
     <div id="rightcontent">
      ##rightcontent##
     </div>
     <div id="centercontent">
      <div id="subheader">
       ##subheader##
      </div>
      <div id="content">
       ##content##
      </div>
     </div>
     <div id="footer">
      ##footer##
     </div>
    </div>

The CSS for the main columns is:

    #header {
    }
    #myzonecontent {
          margin-top: 6px;
          margin-left: 4px;
          margin-right: 4px;
    }
    #leftcontent {
          position: absolute;
          margin-top: 6px;
          left: 4px;
          width: 170px;
    }
    #rightcontent {
          position: absolute;
          margin-top: 6px;
          right: 4px;
          width: 170px;
    }
    #centercontent {
          margin-top: 6px;
          margin-left: 185px;
          margin-right: 185px;
    }
    #subheader {
          clear: both;
    }
    #content {
          clear: both;
    }
    #footer {
          margin-left: 185px;
          margin-right: 185px;
    }

We gave the left- and right content an absolute position. The center content we have positioned correctly by giving it a margin-left and margin-right of 185px to ensure that it doesn't spill under the sidebars.

We tried different approaches and this was the best result for us. We tried with float, but there were some strange results if the content didn't fit, and in a large system fuelled by a CMS that is open to all our members, we couldn't take chances on people only uploading content of the correct size. Your mileage may vary, of course.