sites/rochesterbanquets.com/httpdocs/sources/two-column-example.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Two column CSS layout - header and left menu | Strictly CSS</title>
   3
   4
   5
   6 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">
   7 <meta http-equiv="imagetoolbar" content="no">
   8 <link rel="shortcut icon" href="http://www.strictlycss.com/favicon.ico">
   9 <script src="two-column-example_files/urchin.js" type="text/javascript"></script>
  10 <script type="text/javascript" src="two-column-example_files/analytics.js"></script>
  11 <script type="text/javascript">
  12 urchinTracker();
  13 </script>
  14 <style type="text/css">
  15 /*
  16 CSS-file for Strictly CSS three column layout 2006
  17 http://www.strictlycss.com
  18 Developed by Eivind Savio
  19 */
  20 * /*Set's border, padding and margin to 0 for all values*/
  21 {
  22 padding: 0;
  23 margin: 0;
  24 border: 0;
  25 }
  26 body, html {
  27 color: #000;
  28 font-family: Verdana, Arial, Tahoma, sans-serif;
  29 background-color: #eee;
  30 text-align: center; /*** Centers the design in old IE versions ***/
  31 }
  32 body {
  33 font-size: 70%;
  34 }
  35 p {padding: 7px 0 7px 0;}
  36
  37 a {
  38 color: #000099;
  39 }
  40 a:hover{
  41 color: #0000FF;
  42 text-decoration: none;
  43 }
  44
  45 h1, h2, h3 {
  46 font-weight: bold;
  47 padding-bottom: 5px;
  48 }
  49 h1 {
  50 font-size: 2em;
  51 }
  52 h2 {
  53 font-size: 1.4em;
  54 }
  55 h3 {
  56 font-size: 1.3em;
  57 }
  58 h1 a, #header h2{
  59 color: #fff;
  60 }
  61 .clear { clear: both; }
  62 #mainContainer {
  63 width: 760px;
  64 margin: 0 auto; /*** Centers the design ***/
  65 min-height: 300px;
  66 background: #add8e6;
  67 text-align: left; /*** Because we centered the text in body we have to move the text back to left aligning ***/
  68 }
  69 * html #mainContainer {
  70 height: 300px; /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/
  71 }
  72 /**************************
  73 HEADER
  74 **************************/
  75 #header {
  76 margin-top: 50px; /*** Make some space for the header menu ***/
  77 background: #000099;
  78 padding: 10px;
  79 height: 50px;
  80 }
  81 /**************************
  82 CONTENT AND COLUMNS
  83 **************************/
  84 .outer {
  85 padding-left: 165px;
  86 }
  87 * html .outer {
  88 /*** No need for hacking IE on this layout ***/
  89 }
  90 .inner {
  91 width: 595px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/
  92 }
  93 * html .inner {
  94 width: 100%;
  95 }
  96 /*** div.inner is wider than its container, div.outer, and so overlaps to the right, pushing
  97 div.right into the proper position. IE expands div.outer instead, requiring a Tan hack to avoid
  98 blowing the layout apart. IE gets the original 100% width as in the Livingstone layout.
  99 ***/
 100 .float-wrap {
 101 float: left;
 102 width: 760px;
 103 margin-left: -165px; /*** Same length as .outer padding-left but with negative value ***/
 104 }
 105 * html .float-wrap {
 106 /*** No need for hacking IE on this layout ***/
 107 }
 108 #content {
 109 float: right;
 110 width: 600px;
 111 background: #fff;
 112 }
 113 * html #content {
 114 position: relative; /*** IE needs this  ***/
 115 }
 116 .contentWrap{
 117 padding: 5px;
 118 }
 119 .contentWrap ol, .contentWrap ul {
 120 margin: 3px 0 5px 35px;
 121 }
 122 .contentWrap li {
 123 padding-bottom: 2px;
 124 }
 125 /**************************
 126 LEFT COLUMN
 127 **************************/
 128 /*** div.left is in div.float-wrap, and when div.float-wrap is neg margined to the left,
 129 div.left is carried over into the proper position.
 130 ***/
 131 #left {
 132 float: left;
 133 width: 150px;
 134 background: #fcc;
 135 min-height: 250px;
 136 padding: 5px;
 137 }
 138 * html #left {
 139 position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
 140 height: 250px;
 141 }
 142 #left ul {
 143 list-style: none;
 144 padding-bottom: 4px;
 145 }
 146 #left li {
 147 padding-bottom: 2px;
 148 }
 149
 150 /*************************
 151 RIGHT COLUMN
 152 **************************/
 153 #right {
 154 margin: -120px 0 0 -760px; /*** Moves the right column to the top of the page. This is now our top menu above the header ***/
 155 float: left;
 156 width: 750px;
 157 background: #cfc;
 158 padding: 5px;
 159 height: 40px;
 160 }
 161 * html #right {
 162 position: relative; /*** IE needs this. ***/
 163 margin-top: -125px; /***Since IE is threating padding different than other browsers we need to move it a little bit more ***/
 164 }
 165 #right ul {
 166 float: right;
 167 list-style: none;
 168 }
 169 #right li {
 170 display: inline; /*** Making the links horisontal aligned ***/
 171 padding-right: 15px;
 172 }
 173 /**************************
 174 FOOTER
 175 **************************/
 176 #footer {
 177 width: 760px;
 178 margin: 0 auto; /*** Since the footer is outside the #mainContainer we also need to center the footer ***/
 179 text-align: center;
 180 background-color: yellow;
 181 }
 182 </style></head><body>
 183 <div id="mainContainer">
 184 <div id="header">
 185 <h1><a href="http://www.strictlycss.com/" title="Strictly CSS - a collection of CSS sites and resources">Strictly CSS </a></h1>
 186 <h2>Two column CSS layout - header and left menu</h2>
 187 </div>
 188 <div class="outer">
 189 <div class="inner">
 190 <div class="float-wrap">
 191         <div id="content">
 192           <div class="contentWrap">
 193             <h2>First in source</h2>
 194             <p>Here the three column CSS layout is transformed into a two column
 195               layout with left menu and a top menu above the header. This layout
 196               support <a href="http://www.strictlycss.com/examples/three-column-layout-6.asp">100%
 197               height with footer</a> and <a href="http://www.strictlycss.com/articles/article/22/css-faux-columns">faux
 198               columns</a> if you want to use that.</p>
 199             <p>For further information about how this two column layout with left
 200               menu and a top menu above the header is made, take a look in the
 201               source code.</p>
 202             <h3>What is this about?</h3>
 203 <p>This example page is belonging to the article "<strong><a href="http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need">The
 204   only CSS layout you need(?)</a></strong>". A three column CSS layout is by
 205   changing mainly floating, margin and padding values (no absolute positioning is used)
 206   in the CSS transformed into ten different layouts:</p>
 207 <ol>
 208   <li><a href="http://www.strictlycss.com/examples/three-column-layout-1.asp">Three
 209     column CSS layout - left and right menu</a>. This is the basis layout for
 210     all the different layouts.</li>
 211   <li><a href="http://www.strictlycss.com/examples/three-column-layout-2.asp">Two
 212     column CSS layout - top and left menu</a></li>
 213   <li><a href="http://www.strictlycss.com/examples/three-column-layout-3.asp">Two
 214     column CSS layout - top and right menu</a></li>
 215   <li><a href="http://www.strictlycss.com/examples/three-column-layout-4.asp">Two
 216     column CSS layout - left and footer menu</a></li>
 217   <li><a href="http://www.strictlycss.com/examples/three-column-layout-5.asp">Two
 218     column CSS layout - right and footer menu</a></li>
 219   <li><a href="http://www.strictlycss.com/examples/three-column-layout-6.asp">Three
 220     column CSS layout: 100% height with footer</a>. This layout is also using
 221     <a href="http://www.strictlycss.com/articles/article/22/css-faux-columns">Faux
 222     columns</a>. </li>
 223   <li><a href="http://www.strictlycss.com/examples/three-column-layout-7.asp">Three
 224     column CSS fluid layout: 100% width</a></li>
 225   <li><a href="http://www.strictlycss.com/examples/three-column-layout-8.asp">Three
 226     column CSS fluid layout: 100% width and with column borders</a></li>
 227   <li><a href="http://www.strictlycss.com/examples/three-column-layout-9.asp">Two
 228     column CSS layout - header and left menu</a></li>
 229   <li><a href="http://www.strictlycss.com/examples/three-column-layout-10.asp">One
 230     column CSS layout - top and footer menu</a></li>
 231 </ol>
 232 <h3>Related CSS articles and examples</h3>
 233 <p>Below are some articles that are related to these examples.</p>
 234 <ol>
 235   <li><strong><a href="http://www.strictlycss.com/articles/article/46/three-column-fluid-css-layout-with-rounded-content-corners-and-100-height">Three
 236     column fluid CSS layout with rounded content corners and 100% height</a></strong>.
 237     <ol>
 238       <li>Example: <a href="http://www.strictlycss.com/examples/three-column-rounded-corners-100-percent-height-and-width.asp">Three column fluid CSS layout: 100% height + 100% width and rounded content corners</a></li>
 239     </ol>
 240   </li>
 241    <li><strong><a href="http://www.strictlycss.com/articles/article/47/css-fluid-layouts-with-faux-columns">CSS fluid layouts with faux columns</a></strong>.
 242     <ol>
 243         <li>Example: <a href="http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-1.asp">Three column fluid CSS layout with faux columns and 100% height</a></li>
 244       <li>Example: <a href="http://www.strictlycss.com/examples/fluid-css-layout-with-faux-columns-2.asp">Three column fluid CSS layout with faux columns</a></li>
 245     </ol>
 246   </li>
 247 </ol>
 248 <p>You can use any of these examples for free. Hope you find them useful.</p>
 249
 250           </div>
 251         </div>
 252         <!-- end centered div -->
 253         <div id="left">
 254           <h3>Second in source</h3>
 255           <ul>
 256             <li><a href="#">Left menu 1</a></li>
 257             <li><a href="#">Left menu 2</a></li>
 258             <li><a href="#">Left menu 3</a></li>
 259           </ul>
 260         </div>
 261 <!-- end left div -->
 262 <div class="clear"></div>
 263 </div>
 264
 265       <div id="right">
 266         <h3>Third in source</h3>
 267         <ul>
 268           <li><a href="#">Right menu 1</a></li>
 269           <li><a href="#">Right menu 2</a></li>
 270           <li><a href="#">Right menu 3</a></li>
 271         </ul>
 272       </div>
 273       <!-- end right div -->
 274 <div class="clear"></div>
 275 </div>
 276 </div>
 277 </div>
 278 <div id="footer"><p>This is our footer</p>
 279 </div>
 280
 281 <!-- If you copy the HTML on this page, do NOT copy the code below!
 282 Thanks.
 283 -->
 284 <script src="two-column-example_files/mlt.js" type="text/javascript"></script><img src="two-column-example_files/mlt.gif" height="1" width="1">
 285 <!-- End Do NOT copy HTML -->
 286
 287 </body></html>