michaelsinterface.de

3cols.equalHeight

  • Ein 3-spaltiges CSS-Layout, dessen Spaltenhöhen sich unabhängig von ihrem jeweiligen Inhalt automatisch angleichen.
  • Hierfür wird in dem Elternelement ein Hintergrundbild eingesetzt, das durch seine vertikale Bildwiederholung den Hintergrund der drei Spaltenblöcke erzeugt.
  • Nachdem das Basis-Modell stand, habe ich es in drei Ausbaustufen weiterentwickelt.
  • Grafikdatei für dreispaltigen Hintergrund:
  • -3cols.png-

  • 3cols_basic

    •  Online-Demo  Quellcode  
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>::: 3cols.equalHeight | basic :::</title>

      <style type="text/css">
      <!--
      * {
      margin:0;
      padding:0;
      }
      html, body {
      height:100%;
      }
      div#wrapper {
      width:760px;
      margin:0 auto;
      background:url(3cols.png) repeat-y;
      border-left:1px solid #879BAD;
      border-right:1px solid #879BAD;
      min-height:100%;
      height:auto !important;
      height:100%;
      }
      div#leftCol {
      width:125px;
      float:left;
      }
      div#rightCol {
      width:125px;
      float:right;
      }
      div#centerCol {
      margin:0 125px;
      }

      /* clearfix */
      .clearfix:after {
      content:".";
      display:block;
      height:0;
      font-size:0;
      clear:both;
      visibility:hidden;
      }
      .clearfix {display:inline-block;}
      /* Hides from IE-mac \*/
      * html .clearfix {height:1%;}
      .clearfix {display:block;}
      /* End hide from IE-mac */
      -->
      </style>

      </head>
      <body>

      <div id="wrapper" class="clearfix">
           <div id="leftCol">
                <h2>leftCol</h2>
           </div>
           <div id="rightCol">
                <h2>rightCol</h2>
           </div>
           <div id="centerCol">
                <h2>centerCol</h2>
           </div>
      </div>

      </body>
      </html>

  • 3cols_header

    •  Online-Demo  Quellcode  
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>::: 3cols.equalHeight | header :::</title>

      <style type="text/css">
      <!--
      * {
      margin:0;
      padding:0;
      }
      html, body {
      height:100%;
      }
      div#wrapper {
      position:relative;
      width:760px;
      margin:0 auto;
      background:url(3cols.png) repeat-y;
      border-left:1px solid #879BAD;
      border-right:1px solid #879BAD;
      min-height:100%;
      height:auto !important;
      height:100%;
      }
      div#header {
      height:100px;
      background:#fff;
      border-bottom:1px solid #879BAD;
      }
      div#leftCol {
      width:125px;
      float:left;
      }
      div#rightCol {
      width:125px;
      float:right;
      }
      div#centerCol {
      margin:0 125px;
      }

      /* clearfix */
      .clearfix:after {
      content:".";
      display:block;
      height:0;
      font-size:0;
      clear:both;
      visibility:hidden;
      }
      .clearfix {display:inline-block;}
      /* Hides from IE-mac \*/
      * html .clearfix {height:1%;}
      .clearfix {display:block;}
      /* End hide from IE-mac */
      -->
      </style>

      </head>
      <body>

      <div id="wrapper" class="clearfix">
           <div id="header">
                <h2>header</h2>
           </div>
           <div id="leftCol">
                <h2>leftCol</h2>
           </div>
           <div id="rightCol">
                <h2>rightCol</h2>
           </div>
           <div id="centerCol">
                <h2>centerCol</h2>
           </div>
      </div>

      </body>
      </html>

  • 3cols_header_footer

    •  Online-Demo  Quellcode  
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>::: 3cols.equalHeight | header + footer :::</title>

      <style type="text/css">
      <!--
      * {
      margin:0;
      padding:0;
      }
      html, body {
      height:100%;
      }
      div#wrapper {
      position:relative;
      width:760px;
      margin:0 auto;
      background:url(3cols.png) repeat-y;
      border-left:1px solid #879BAD;
      border-right:1px solid #879BAD;
      min-height:100%;
      height:auto !important;
      height:100%;
      }
      div#header {
      height:100px;
      background:#fff;
      border-bottom:1px solid #879BAD;
      }
      div#leftCol {
      width:125px;
      float:left;
      padding-bottom:55px;
      }
      div#rightCol {
      width:125px;
      float:right;
      padding-bottom:55px;
      }
      div#centerCol {
      margin:0 125px;
      padding-bottom:55px;
      }
      div#footer {
      clear:both;
      position:absolute;
      bottom:0;
      width:760px;
      height:50px;
      background:#fff;
      border-top:1px solid #879BAD;
      }
      -->
      </style>

      </head>
      <body>

      <div id="wrapper">
           <div id="header">
                <h2>header</h2>
           </div>
           <div id="leftCol">
                <h2>leftCol</h2>
           </div>
           <div id="rightCol">
                <h2>rightCol</h2>
           </div>
           <div id="centerCol">
                <h2>centerCol</h2>
           </div>
           <div id="footer">
                <h2>footer</h2>
           </div>
      </div>

      </body>
      </html>

  • 3cols_header_topNavi_footer

    •  Online-Demo  Quellcode  
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>::: 3cols.equalHeight | header + topNavi + footer :::</title>

      <style type="text/css">
      <!--
      * {
      margin:0;
      padding:0;
      }
      html, body {
      height:100%;
      }
      div#wrapper {
      position:relative;
      width:760px;
      margin:0 auto;
      background:url(3cols.png) repeat-y;
      border-left:1px solid #879BAD;
      border-right:1px solid #879BAD;
      min-height:100%;
      height:auto !important;
      height:100%;
      }
      div#header {
      height:100px;
      background:#fff;
      }
      div#topNavi {
      height:40px;
      background:#fff;
      border-top:1px solid #879BAD;
      border-bottom:1px solid #879BAD;
      }
      div#leftCol {
      width:125px;
      float:left;
      padding-bottom:55px;
      }
      div#rightCol {
      width:125px;
      float:right;
      padding-bottom:55px;
      }
      div#centerCol {
      margin:0 125px;
      padding-bottom:55px;
      }
      div#footer {
      clear:both;
      position:absolute;
      bottom:0;
      width:760px;
      height:50px;
      background:#fff;
      border-top:1px solid #879BAD;
      }
      -->
      </style>

      </head>
      <body>

      <div id="wrapper">
           <div id="header">
                <h2>header</h2>
           </div>
           <div id="topNavi">
                <h2>topNavi</h2>
           </div>
           <div id="leftCol">
                <h2>leftCol</h2>
           </div>
           <div id="rightCol">
                <h2>rightCol</h2>
           </div>
           <div id="centerCol">
                <h2>centerCol</h2>
           </div>
           <div id="footer">
                <h2>footer</h2>
           </div>
      </div>
       
      </body>
      </html>