2 Replies Latest reply: Apr 5, 2012 1:37 AM by manojb05 RSS

    Div Layout

    manojb05 Community Member

      Dear All,

      I like one design, that is made by div table. I have a best knowledge in table based layout.

      Div based layout is attached for your reference.

      please help out this, how can make container like this

       

      I am making something like this, my codes are attached for your references.

       

      Picture 2.png

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      <title>Untitled Document</title>

      <link href="untitled.css" rel="stylesheet" type="text/css" />

      </head>

       

       

      <body>

      <div id="container">

        <div align="justify">Container

          <div id="rightside">Right Side </div>

          <div id="leftside">Left Side Navigation </div>

        </div>

      </div>

       

       

      <div id="footer">Footer</div>

      </body>

      </html>

       

      @charset "UTF-8";

      #container {

                width: 960px;

                margin-top: 0px;

                margin-right: auto;

                margin-left: auto;

                margin-bottom: 0px;

      }

      #leftside {

                width: 420px;

      }

      #rightside {

                width: 420px;

                float: right;

      }

      #footer {

                width: 960px;

                margin-top: 0px;

                margin-right: auto;

                margin-bottom: 0px;

                margin-left: auto;

      }

        • 1. Re: Div Layout
          osgood_ MVP

          See if the below html/css helps:

           

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml">

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

          <title>Untitled Document</title>

          <style type="text/css">

          #wrapper {

              width: 980px;

              margin: 0 auto;

          }

          #header {

              overflow: hidden;

          }

          #headerLeft {

              float: left;

              width: 600px;

          }

          #headerRight {

              float: right;

              width: 380px;

          }

          #mainAreaWrapper {

              overflow: hidden;

          }

          #mainAreaLeft {

              float: left;

              width: 240px;

          }

          #mainAreaRight {

              float: left;

              width: 740px;

          }

          #mainAreaTop {

              min-height: 320px;

              background-color: #CCC;

              margin-bottom: 15px;

                  -moz-border-radius: 5px;

          -webkit-border-radius: 5px;

          -o-border-radius: 5px;

          }

          #mainAreaBlueBox {

              min-height: 250px;

              float: left;

              width: 450px;

              background-color:#09C;

              -moz-border-radius: 5px;

          -webkit-border-radius: 5px;

          -o-border-radius: 5px;

          }

          #mainAreaGreenBox {

              min-height: 250px;

              float: left;

              width: 280px;

              margin-left: 10px;

              background-color:#6C3;

              -moz-border-radius: 5px;

          -webkit-border-radius: 5px;

          -o-border-radius: 5px;

          }

           

          </style>

          </head>

           

          <body>

          <div id="wrapper">

          <div id="header">

          <div id="headerLeft">Header Left</div><!-- end headerLeft -->

          <div id="headerRight">Header Right</div><!-- end headerRight -->

          </div><!-- end header-->

          <div id="mainAreaWrapper">

          <div id="mainAreaLeft">Main Area Left</div><!-- end mainAreaLeft -->

          <div id="mainAreaRight">

          <div id="mainAreaTop">Main Area Top</div><!-- end mainAreaTop -->

          <div id="mainAreaBlueBox">Blue Box</div><!-- end mainAreaBlueBox -->

          <div id="mainAreaGreenBox">Green Box</div><!-- end mainAreaBlueBox -->

          </div><!-- end mainAreaRight -->

          </div><!-- end mainAreaWrapper -->

          <div id="footer">Footer</div>

          </div><!-- end warpper -->

          </body>

          </html>

          • 2. Re: Div Layout
            manojb05 Community Member

            thankyou somuch. i want to improve div based layout, u have any tutorial link