ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Div Css layout sample div
    Web/Css 2014. 4. 5. 00:25
    반응형


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Faux Column CSS Layouts - 2 Column - faux-2-2-col</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>

    <body>

    <div id="header">
    This is the Footer
    </div>
    <div id="content">
    <div id="box1">aaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaa
    aaaaaaaaaaaaaaaaaa
    </div>
    1111111111111111111111111111111111111111
    1111111111111111111111111111111111111111
    1111111111111111111111111111111111111111
    1111111111111111111111111111111111111111
    1111111111111111111111111111111111111111111111
    1111111111111111111111111111111111111111
    111111111111111111111111111111111111111111

    </div>


    <div id="footer">

    This is the Footer

    </div>
    </body>
    </html>

     

     

     

     

     

     

     

     

     

    #header {
    position:absolute;
    height: 50px;
    left:0;
    top:0;
    width:100%;
    background:green;
    }

    #footer {
    position:absolute;
    height: 50px;
    left:0;
    bottom:0;
    width:100%;
    background:green;
    }

    #content {
    position: absolute;
    top:50px;
    bottom:50px;
    left:0;
    width:100%;
    background:#eee;
    }

    #box1 {
    height:50%;
    width:30%;
    float: right;
    background:red;
    }

     

     

     

     

    반응형

    댓글

Designed by Tistory.