The new design of Triptivity – How to do a “three column layout”

Dezember 2, 2009 at 10:16 pm Hinterlasse einen Kommentar

The new three column layout

The three column page layout of the current portal triptivity.com is a bit clumsy. Ok, the header and footer is straightforward, but the content is not made in the best way. The left and center column are together in a div which is not really elegant.

The old way

<body>
 <div id="page">
   <div id="page_header"/>
   <div id="page_left_and_center">
     <div id="page_center"/>
     <div id="page_left"/>
   </div>
   <div id="page_right"/>
   <div id="page_footer">
 </div>
</body>

With the redesign of Triptivity I wanted to find a cleaner, better way of arranging the html code. In the shallows of the internet I searched and found “the holy grail” of three columns. Matthew Levine wrote in detail how to setup a perfect three column layout which can be used in all current browsers (www.alistapart.com/articles/holygrail/). As he explained everything with nice graphics from Kevin Cornell I won’t repeat it here and just show the result….

The new way

<body>
 <div id="page">
   <div id="page_header"/>
   <div id="page_content"/>
     <div id="page_content_center_column"/>
     <div id="page_content_left_column"/>
     <div id="page_content_right_column"/>
   </div>
   <div id="page_footer"/>
 </div>
</body>

And the corresponding css part:

body {
 margin: auto; /* no margin, center */
 width: 980px; /* width of page */
}

#page {
 padding: 0 210px 0 210px; /* right fullwidth; left fullwidth; */
}

#page_content {
 margin: -.5em 0 0 0;
}

#page_content_center_column {
 float: left;
 padding: 0;  
 position: relative;
 width: 560px; /* width of center */
}

#page_content_left_column {
 float: left;
 margin: 0 0 0 -100%;  
 padding: 0;
 position: relative;
 right: 200px;
 width: 200px;
}

#page_content_right_column {
 float: left;
 margin: 0 -100% 0 0;  
 padding: 0;
 position: relative;
 width: 200px;
}

#page_footer {
 clear: both;
}

#page_footer,
#page_header {
 margin: 0 -200px 0 -200px; /* right width; left width */
 padding: 12px 0 0 0;
}

The code can be downloaded from the ZIP-File