michaelsinterface.de

css.layout

  • In diesem Experiment stelle ich CSS-gestützte Modelle für (tabellenlose) Seiten-Layouts vor.

  • "position"-Technics

    • position.01

      •  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>::: css.layout | position.01 :::</title>

        <style type="text/css">
        <!--
        div.centerDiv {
        position:absolute;
        left:50%;
        width:650px;
        margin-left:-325px;
        top:50%;
        height:360px;
        margin-top:-180px;
        background:#eee;
        border:1px solid #607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="centerDiv">
         <p>.centerDiv</p>
        </div>

        </body>
        </html>

    • position.02

      •  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>::: css.layout | position.02 :::</title>

        <style type="text/css">
        <!--
        div.contentDiv {
        position:relative;
        left:50%;
        width:650px;
        height:98px;
        margin-left:-325px;
        margin-top:20px;
        background: #eee;
        border: 1px solid #607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="contentDiv">
         <p>multiple rows</p>
        </div>
        <div class="contentDiv">
         <p>.contentDiv</p>
        </div>
        <div class="contentDiv">
         <p>.contentDiv</p>
        </div>
        <div class="contentDiv">
         <p>.contentDiv</p>
        </div>


        </body>
        </html>

    • position.03

      •  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>::: css.layout | position.03 :::</title>

        <style type="text/css">
        <!--
        div.contentDiv {
        position:relative;
        left:50%;
        width:650px;
        height:460px;
        margin-left:-325px;
        margin-top:20px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.menuDiv
        {
        position:relative;
        z-index:1;
        float:left;
        width:150px;
        height:150px;
        margin-right:50px;
        background:#607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="contentDiv">
         <div class="menuDiv">
              <p>.menuDiv</p>
         </div>
         <p>.contentDiv</p>
        </div>

        </body>
        </html>

    • position.04

      •  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>::: css.layout | position.04 :::</title>

        <style type="text/css">
        <!--
        div.contentDiv {
        position:relative;
        left:50%;
        width:650px;
        height:460px;
        margin-left:-325px;
        margin-top:20px;
        background:#eee;
        border: 1px solid #607b9e;
        }
        div.menuDiv {
        position:relative;
        z-index:1;
        float:right;
        width:150px;
        height:150px;
        margin-left:50px;
        background:#607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="contentDiv">
         <div class="menuDiv">
              <p>.menuDiv</p>
         </div>
         <p>.contentDiv</p>
        </div>

        </body>
        </html>

    • position.05

      •  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>::: css.layout | position.05 :::</title>

        <style type="text/css">
        <!--
        div.mainDiv {
        position:absolute;
        left:50%;
        width:650px;
        margin-left:-325px;
        margin-top:20px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.headDiv {
        height:80px;
        border-bottom:1px dashed #607b9e;
        }
        div.menuDiv {
        float:left;
        width:140px;
        height:360px;
        border-right:1px dashed #607b9e;
        padding-top:20px;
        }
        div.contentDiv {
        float:right;
        width:500px;
        padding-top:20px;
        }
        -->
        </style>

        </head>
        <body>

        <div class="mainDiv">
         <div class="headDiv">
              <p>.headDiv</p>
         </div>
         <div class="menuDiv">
              <p>.menuDiv</p>
         </div>

         <div class="contentDiv">
              <p>.contentDiv</p>
         </div>
        </div>

        </body>
        </html>

    • position.06

      •  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>::: css.layout | position.06 :::</title>

        <style type="text/css">
        <!--
        div.mainDiv {
        position:absolute;
        left:50%;
        width:650px;
        margin-left:-325px;
        margin-top:20px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.headDiv {
        height:80px;
        border-bottom:1px dashed #607b9e;
        }
        div.leftmenuDiv {
        float:left;
        width:140px;
        height:360px;
        border-right:1px dashed #607b9e;
        padding-top:20px;
        }
        div.rightmenuDiv {
        float:right;
        width:140px;
        height:360px;
        border-left:1px dashed #607b9e;
        padding-top:20px;
        }
        div.contentDiv {
        width:auto;
        margin:0 150px;
        padding-top:20px;
        }
        -->
        </style>

        </head>
        <body>

        <div class="mainDiv">
         <div class="headDiv">
              <p>.headDiv</p>
         </div>
         <div class="leftmenuDiv">
              <p>.leftmenuDiv</p>
         </div>
         <div class="rightmenuDiv">
              <p>.rightmenuDiv</p>
         </div>
         <div class="contentDiv">
              <p>.contentDiv</p>
         </div>
        </div>

        </body>
        </html>

    • position.07

      •  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>::: css.layout | position.07 :::</title>

        <style type="text/css">
        <!--
        div.menuDiv {
        position:absolute;
        top:20px;
        left:10px;
        width:170px;
        height:460px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.contentDiv {
        height:460px;
        margin:20px 10px 10px 190px;
        background:#eee;
        border:1px solid #607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="menuDiv">
         <p>.menuDiv</p>
        </div>
        <div class="contentDiv">
         <p>.contentDiv</p>
        </div>

        </body>
        </html>

    • position.08

      •  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>::: css.layout | position.08 :::</title>

        <style type="text/css">
        <!--
        div.leftmenuDiv {
        position:absolute;
        top:20px;
        left:10px;
        width:170px;
        height:460px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.rightmenuDiv {
        position:absolute;
        top:20px;
        right:10px;
        width:170px;
        height:460px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.contentDiv {
        width:auto;
        height:460px;
        margin:20px 190px;
        background:#eee;
        border:1px solid #607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="leftmenuDiv">
         <p>.leftmenuDiv</p>
        </div>
        <div class="rightmenuDiv">
         <p>.rightmenuDiv</p>
        </div>
        <div class="contentDiv">
         <p>.contentDiv</p>

        </div>

        </body>
        </html>

    • position.09

      •  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>::: css.layout | position.09 :::</title>

        <style type="text/css">
        <!--
        div.headDiv {
        height:50px;
        margin:20px 10px 10px 10px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.leftmenuDiv {
        position:absolute;
        top:80px;
        left:10px;
        width:170px;
        height:400px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.rightmenuDiv {
        position:absolute;
        top:80px;
        right:10px;
        width:170px;
        height:400px;
        background:#eee;
        border:1px solid #607b9e;
        }
        div.contentDiv {
        width:auto;
        height:400px;
        margin:-1px 190px 0 190px;
        background:#eee;
        border:1px solid #607b9e;
        }
        -->
        </style>

        </head>
        <body>

        <div class="headDiv">
         <p>.headDiv</p>
        </div>
        <div class="leftmenuDiv">
         <p>.leftmenuDiv</p>
        </div>
        <div class="rightmenuDiv">
         <p>.rightmenuDiv</p>

        </div>
        <div class="contentDiv">
         <p>.contentDiv</p>
        </div>

        </body>
        </html>
    • » to be continued

  • "float"-Technics

    • float.01

      •  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>::: css.layout | float.01 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        width:310px;
        height:350px;
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .marginRight {
        margin-right:10px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft marginRight">
                   <p>.col 1</p>
              </div>
              <div class="col floatLeft">
                   <p>.col 2</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.02

      •  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>::: css.layout | float.02 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        width:203.333px;
        height:350px;
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .marginRight {
        margin-right:10px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft marginRight">
                   <p>.col 1</p>
              </div>
              <div class="col floatLeft marginRight">
                   <p>.col 2</p>
              </div>
              <div class="col floatLeft">
                   <p>.col 3</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.03

      •  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>::: css.layout | float.03 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        width:150px;
        height:350px;
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .marginRight {
        margin-right:10px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft marginRight">
                   <p>.col 1</p>
              </div>
              <div class="col floatLeft marginRight">
                   <p>.col 2</p>
              </div>
              <div class="col floatLeft marginRight">
                   <p>.col 3</p>
              </div>
              <div class="col floatLeft">
                   <p>.col 4</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.04

      •  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>::: css.layout | float.04 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        width:118px;
        height:350px;
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .marginRight {
        margin-right:10px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft marginRight">
                   <p>.col 1</p>
              </div>
              <div class="col floatLeft marginRight">
                   <p>.col 2</p>
              </div>
              <div class="col floatLeft marginRight">
                   <p>.col 3</p>
              </div>
              <div class="col floatLeft marginRight">
                   <p>.col 4</p>
              </div>
              <div class="col floatLeft">
                   <p>.col 5</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.05

      •  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>::: css.layout | float.05 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .floatRight {
        float:right;
        display:inline;
        }
        .lefttopDiv {
        width:150px;
        line-height:60px;
        }
        .righttopDiv {
        width:470px;
        line-height:60px;
        }
        .leftDiv, .rightDiv {
        height:250px;
        }
        .leftDiv {
        width:150px;
        }
        .rightDiv {
        width:470px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft lefttopDiv">
                   <p>.lefttopDiv</p>
              </div>
              <div class="col floatRight righttopDiv">
                   <p>.righttopDiv</p>
              </div>
         </div>
         <div class="wrapperDiv">
              <div class="col floatLeft leftDiv">
                   <p>.leftDiv</p>
              </div>
              <div class="col floatRight rightDiv">
                   <p>.rightDiv</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.06

      •  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>::: css.layout | float.06 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .floatRight {
        float:right;
        display:inline;
        }
        .lefttopDiv {
        width:150px;
        line-height:60px;
        }
        .righttopDiv {
        width:470px;
        line-height:60px;
        }
        .leftDiv, .rightDiv {
        width:150px;
        height:250px;
        background:#eee;
        }
        .centerDiv {
        height:250px;
        margin:0 160px 0 160px !important;
        margin:0 157px 0 157px; /* 3px-Bug im IE korrigieren */
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft lefttopDiv">
                   <p>.lefttopDiv</p>
              </div>
              <div class="col floatRight righttopDiv">
                   <p>.righttopDiv</p>
              </div>
         </div>
         <div class="wrapperDiv">
              <div class="col floatLeft leftDiv">
                   <p>.leftDiv</p>
              </div>
              <div class="col floatRight rightDiv">
                   <p>.rightDiv</p>
              </div>
              <div class="col centerDiv">
                   <p>.centerDiv</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.07

      •  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>::: css.layout | float.07 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .floatRight {
        float:right;
        display:inline;
        }
        .lefttopDiv {
        width:470px;
        line-height:60px;
        }
        .righttopDiv {
        width:150px;
        line-height:60px;
        }
        .leftDiv, .rightDiv {
        height:250px;
        }
        .leftDiv {
        width:470px;
        }
        .rightDiv {
        width:150px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft lefttopDiv">
                   <p>.lefttopDiv</p>
              </div>
              <div class="col floatRight righttopDiv">
                   <p>.righttopDiv</p>
              </div>
         </div>
         <div class="wrapperDiv">
              <div class="col floatLeft leftDiv">
                   <p>.leftDiv</p>
              </div>
              <div class="col floatRight rightDiv">
                   <p>.rightDiv</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.08

      •  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>::: css.layout | float.08 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .floatRight {
        float:right;
        display:inline;
        }
        .lefttopDiv {
        width:470px;
        line-height:60px;
        }
        .righttopDiv {
        width:150px;
        line-height:60px;
        }
        .leftDiv, .rightDiv {
        width:150px;
        height:250px;
        background:#eee;
        }

        .centerDiv {
        height:250px;
        margin:0 160px 0 160px !important;
        margin:0 157px 0 157px; /* 3px-Bug im IE korrigieren */
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="col floatLeft lefttopDiv">
                   <p>.lefttopDiv</p>
              </div>
              <div class="col floatRight righttopDiv">
                   <p>.righttopDiv</p>
              </div>
         </div>
         <div class="wrapperDiv">
              <div class="col floatLeft leftDiv">
                   <p>.leftDiv</p>
              </div>
              <div class="col floatRight rightDiv">
                   <p>.rightDiv</p>
              </div>
              <div class="col centerDiv">
                   <p>.centerDiv</p>
              </div>
         </div>
        </div>

        </body>
        </html>

    • float.09

      •  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>::: css.layout | float.09 :::</title>

        <style type="text/css">
        <!--
        #mainDiv {
        width:650px;
        margin:20px auto;
        border:1px solid #607b9e;
        }
        .wrapperDiv {
        margin:10px;
        }
        .wrapperDiv:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
        }
        .wrapperDiv {display:inline-block;}
        /* Hides from IE-mac \*/
        * html .wrapperDiv {height:1%;}
        .wrapperDiv {display:block;}
        /* End hide from IE-mac */
        .col {
        background:#eee;
        }
        .floatLeft {
        float:left;
        display:inline;
        }
        .floatRight {
        float:right;
        display:inline;
        }
        div.leftCol, div.rightCol {
        width:310px;
        }
        .contentDiv {
        height:170px;
        }
        .marginTop {
        margin-top:10px;
        }
        -->
        </style>

        </head>
        <body>

        <div id="mainDiv">
         <div class="wrapperDiv">
              <div class="floatLeft leftCol">
                   <div class="col contentDiv">
                        <p>.contentDiv</p>
                   </div>
                   <div class="col contentDiv marginTop">
                        <p>.contentDiv</p>
                   </div>
              </div>
              <div class="floatRight rightCol">
                   <div class="col contentDiv">
                        <p>.contentDiv</p>
                   </div>
                   <div class="col contentDiv marginTop">
                        <p>.contentDiv</p>
                   </div>
              </div>
         </div>
        </div>

        </body>
        </html>
    • » to be continued
  •  Author: Maik
  •  Date: 2005-02-04
  •  SiteContent last modified: 2006-01-03
  • Top of Page