/* Start of CMSMS style sheet '01-bawt-3-column-100pct-stylesheet' */ /* CSS-file for three column layout 2006 http://www.savio.no/ Developed by Eivind Savio */ * /*Sets border, padding and margin to 0 for all values*/ { padding: 0; margin: 0; border: 0; } body, html { color: #000; font-family: Verdana, Arial, Tahoma, sans-serif; background-color: #eee; } body { font-size: 100%; min-width: 760px; } p { padding: 7px 0 7px 0; } a { color: #000099; } a:hover{ color: #0000FF; text-decoration: none; } /* hide fonts in this stylesheet h1, h2, h3 { font-weight: bold; padding-bottom: 5px; } h1 { font-size: 2em; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h1 a, #header h2{ color: #fff; } */ .clear { clear: both; } #mainContainer { min-height: 300px; background: #fff; border: 0px solid #000; /*** was 1px ***/ } * html #mainContainer { height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/ } /************************** HEADER **************************/ #header { background: #FFFFFF; /*** was dk blue 000099 ***/ padding: 10px; min-height: 100px; } /************************** CONTENT AND COLUMNS **************************/ .outer { padding-left: 260px; /*** was 165px ***/ padding-right: 260px; /*** was 120px ***/ background: url(examples/blackline.gif) 100% 0 repeat-y; } /*** This is the visible right col background. Because of IE (both 6 and 7) the right col background and inner border is in fact an repating image where 1px of the left part of the image is black, and is simulating a border. ***/ * html .outer { /*** No need for hacking IE on this layout ***/ } .inner { width: 100%; border: 0px solid #000; /*** was 1px is left of main content ***/ border-width: 0 0 0 0px; /*** was 0 0 0 1px is left of main content ***/ margin-left: -2px; /*** This fixes a small overlap problem. Without this the border on the left side of the right column won't be visible ***/ } * html .inner { /*** No need for hacking IE on this layout ***/ } /*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid blowing the layout apart. IE gets the original 100% width as in the Livingstone layout. It blows my mind that all this hacking is being caused by the mighty Gecko engine! (shakes head ruefully) ***/ .float-wrap { float: left; width: 100%; margin-left: -260px; /*** was -165 -- Same length as .outer padding-left but with negative value ***/ } * html .float-wrap { /*** No need for hacking IE on this layout ***/ } #content { float: right; background: #fff; margin-right: -260px; /*** was -165 -- Same length as .outer padding-left but with negative value ***/ width: 100%; } * html #content { position: relative; /*** IE needs this ***/ } .contentWrap{ padding: 5px; } .contentWrap ol, .contentWrap ul { margin: 3px 0 5px 35px; } .contentWrap li { padding-bottom: 2px; } /************************** LEFT COLUMN **************************/ /*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left, div.left is carried over into the proper position. ***/ #left { float: left; width: 240px; /*** Teena - was 150px ***/ min-height: 250px; padding: 5px; border: 1px #CCC dashed; } * html #left { position: relative; /*** IE needs this ***/ height: 250px; } #left ul { list-style: none; padding-bottom: 4px; } #left li { padding-bottom: 2px; } /************************* RIGHT COLUMN **************************/ #right { float: right; width: 180px; /*** was 120 ***/ position: relative; /*** IE needs this ***/ padding: 5px; min-height: 1px; /*** was ?px ***/ margin-right: -205px; /** This negative margin-right value is the width of the right column + the padding, in this example 130px. ***/ border: opx #CCC dashed; } * html #right { height: ; /*** was 250px ***/ } #right ul { list-style: none; padding-bottom: 4px; } #right li { padding-bottom: 2px; } /************************** FOOTER **************************/ #footer { text-align: center; background-color: #FFFFFF; border: 1px #CCC dashed; } /* End of '01-bawt-3-column-100pct-stylesheet' */ /* Localized */