<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- #BeginEditable "doctitle" --> <title>Two Column sized with Ems</title> <!-- #EndEditable --> <link href="2col-em-ful.css" rel="stylesheet" type="text/css" /> <!-- #BeginEditable "headblock" --> <!-- add metas, head section styles or scripts here --> <!-- #EndEditable --> <!--[if IE]> <style type="text/css"> /* place css fixes for all versions of IE in this conditional comment */ #sidecol{ padding-top: 30px; } #mainContent { zoom: 1; padding-top: 15px; } /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */ </style> <![endif]--> </head> <body> <div id="container"> <div id="masthead"> <h1><!-- #BeginEditable "masthead" -->masthead<!-- #EndEditable --></h1> <!-- end #masthead --></div> <div id="sidecol"> <!-- #BeginEditable "sidecolumn" --> <h3>sidecol Content</h3> <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if the #mainContent div will always contain more content than the #sidecoldiv. </p> <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p> <!-- #EndEditable --> <!-- end #sidecol--></div> <div id="mainContent"> <!-- #BeginEditable "mainsection" --> <h2> Main Content </h2> <p>The mainContent div is set to 46em which creates a container that will fit in an 800px browser window if text is left at browser default font sizes </p> <h3>Tips for this template</h3> <p>1. If you give the #mainContent div a font-size value different than the #sidecol div, the margins of the #mainContent div may need to be adjusted since the margin uses the font size of the #maincontent div and not the sidecol div to determine the width of the margin. Make sure you test in multiple browsers if you change the font size.</p> <p>2. To avoid float drop if you you images in the sidecol test with the font sizes one to two sizes smaller than the browser default to avoid float drop.</p> <p>3. The Internet Explorer Conditional Comment in the head section, the zoom property is used to give the mainContent "hasLayout." This can IE specific property can prevent some IE-specific bugs that and since it is contained in a conditional comment it will not effect other browsers.</p> <h3>Full height side column</h3> <p>If you would like to have the side column the full height of the content div move the background-color from the #container div and to the #mainContent div. Then move the background color on the #container div to the background color of the #sidecol div.</p> <p><strong>NOTE:</strong> This only works when the mainContent div is longer than the side column.</p> <h3>License</h3> <p>You may use or modify this Dynamic Web Templates as you see fit. <br /> </p> <!-- #EndEditable --> <!-- end #mainContent --></div> <div id="footer"> <p>© 2007 by-expression.com</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html>