<!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>Three column - em based</title> <!-- #EndEditable --> <link href="3col-em.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 */ #sidecol1, #sidecol2 { 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"> <!-- #BeginEditable "masthead" --> <h1>masthead</h1> <!-- #EndEditable --> <!-- end #masthead --></div> <div id="sidecol1"> <!-- #BeginEditable "leftcolumn" --> <h3>sidecol1 </h3> <p>Unlike the Reading Template 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 and/or right side of the #mainContent div if the #mainContent div will always contain more content than the #sidecol1 div. </p> <!-- #EndEditable --> <!-- end #sidecol1 --></div> <div id="sidecol2"> <!-- #BeginEditable "rightcolumn" --> <h3>sidecol2</h3> <p><strong> ContentTips for sidecols:</strong></p> <p>1. Be aware that if you set a font-size value on this div, the overall width of the div will be adjusted accordingly.</p> <p>2. Since we are working in ems, it's best not to use padding on the sidecol itself. It will be added to the width for standards compliant browsers creating an unknown actual width. </p> <p>3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".thrColElsHdr #sidecol1 p" rule.<br /> */<br /> </p> <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p> <!-- #EndEditable --> <!-- end #sidecol2 --></div> <div id="mainContent"> <!-- #BeginEditable "mainsection" --> <h2>Tips for em based layouts </h2> <p>1. With em layouts overall size is based on the visitor's default fonts size which means they are less predictable but more visitor friendly. They are also more accessible for those that need larger fonts size since the line length remains proportionate.</p> <p>2. This layout is based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 90% on the body element or the #container, (do not go smaller or more of your visitors will need to resize to comfortably read the page) the entire layout will be proportionately smaller. You can adjust the size of the side columns by changing the number of ems used in sidecol1 and sidecol2. Make sure that you adjust the mainContent section accordingly. i</p> <p>3. Be careful if you change the font size of any of the divs individually. Make sure you preview in as many browsers as possible if you do not use the same size in the side columns or the mainContent div.</p> <p>4. 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>Avoiding Extra Space Between Divs</h3> <p>If you have ever had space appearing above or below a div that you were unable to account for it you may be seeing margin collapse. </p> <p>Turning on margin and padding visual aids can help you determine if margin collapse is responsible for extra space.</p> <p>Zeroing the margin of the last element in the #masthead div will avoid margin collapse. If the div has a border around it, this is not necessary as that also avoids the margin collapse. </p> <p>Adding a small amount of padding to the bottom of a div can also prevent margin collapse.</p> <h3>Full height side columns</h3> <p>If you would like to have the side columns 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 divs.</p> <p><strong>NOTE:</strong> This only works when the mainContent div is longer than the side columns.</p> <h3>License</h3> <p>You may use or modify this Dynamic Web Templates as you see fit. </p> <!-- #EndEditable --> <!-- end #mainContent --></div> <div id="footer"> <p>© 2007 by-expression.com</p> <!-- end #footer --></div> <!-- end #container --></div> </body> </html>