masthead

sidecol Content

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.

Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien.

Download the zip file for this dwt

Main Content

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

Tips for this template

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.

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.

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.

Full height side column

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 divs.

NOTE: This only works when the mainContent div is longer than the side column.