Skip navigation
Currently Being Moderated

Div Layout

Apr 5, 2012 12:11 AM

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;

}

 
Replies
  • Currently Being Moderated
    Apr 5, 2012 12:37 AM   in reply to manojb05

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points