«
»

Build a 3 column layout using CSS, Master Pages and Themes

Using ASP.Net Mater pages and themes makes it very easy to give a consistent layout and feel for the entire site. The 3 column fixed layout is a common design for most sites. I reuse the following code most of the time to create a 3 column layout which works in most browsers including FF2, FF3, IE6 and IE7. All the code for design and layout are placed in a css file under the Themes folder

3 column layout

3 column layout

Here is the code for the master page. It is simple . It contains 3 columns with a center content area and a footer at the bottom.

Code for Master Page

<body>
<form id="form1" runat="server">
    <div id="body_area">
        <div id="left">
              <div class="InnerText">
                  <div id="logo">
                  </div>
                  <div class="Nav">
                        <ul class="Nav">
                              <li><a href="">Link1</a></li>
                              <li><a href="">Link1</a></li>
                              <li><a href="">Link1</a></li>
                              <li><a href="">Link1</a></li>
                         </ul>
                  </div>
              </div>
         </div>
           <div id="mid">
              <div id="banner">
              </div>
               <div class="InnerText">
                <asp:contentplaceholder id="Content1" runat="server">
                </asp:contentplaceholder>
               </div>
            </div>
       <div id="right">
           <div class="InnerText">
                Right
            </div>
      </div>
   <div id="footer">
     <div class="InnerText">
           footer
     </div>
   </div>
  </div>
</form>
</body>

Here is the CSS file which will go under the themes folder

Code for CSS file

body
{
    margin:0;
     padding-top:0px;
    padding-right:0;
    padding-bottom:0;
     padding-left:0;
     font-family:Arial, Helvetica, sans-serif;
    background-color:#D5CDAC;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{

      margin:0; padding:0;
}

ul{
     margin:0; 
     padding:0; 
     list-style-type:none;
     font-size:12px;
     line-height:150%;
}

.spacer{
      clear:both; 
      font-size:0; 
      line-height:0;
}

/*-------------------body_area--------------------*/
#body_area{

      width:1004px;
      margin-top:10px;
      margin-right:auto;
       margin-bottom:0;
      margin-left:auto;
      font-family:Tahoma;
      font-size: 12px;
      font-style:normal;
      line-height:normal;
      font-weight:bold;
      font-variant:normal;
      text-transform:none;
      text-decoration:none;
      padding: 0px;
      float: none;
 }
#logo
{
  width:170px;
  height:100px;

}

#left {
      margin: 0px;
      float: left;  
      width: 185px;
       height: 500px;
      padding-top:4px;
      padding-right:0px;
      padding-bottom:0px;
      padding-left:0px;
      background-color:#EDE8D3;
      margin-bottom:12px;
}

#left div.InnerText
{
      padding-left:12px;
}

div.Nav
{
    width:140px;
    margin-right:auto;
    margin-left:auto;
    background-color:#E3DCBD;
    padding-bottom:20px;

}

ul.Nav
{
      padding: 8px 0px 0 22px;
      background-color:#E3DCBD;
      color:#000;
      margin:0 0 0 2px;
}
   
ul.Nav li
{
   background:url('images/nav_div2.gif') repeat-x left bottom;
   font-size:0;
   line-height:0
}

ul.Nav li a
{
      display:block;
      background:inherit url('images/arrow.gif')no-repeat 2px 6px;
      color:#787159;
      text-decoration:none;
      font-weight:bolder; font-style:normal; font-variant:normal;
      line-height:17px; 
      font-size:11px; font-family:Arial, Helvetica, sans-serif;
      padding-left:8px; padding-right:0; padding-top:0; padding-bottom:0;
      background-color:inherit
}

ul.Nav li a:hover{
      color:#A73F00;
      background-color:#EFECC8;
}

#banner
{
      width:620px;
      height:100px;
      margin-left:auto;
      margin-right:auto;
      text-align:center ;
      background-color:Gray ;
}

#mid {
      margin: 0px;
      padding: 0px;
      float: left;
      width: 628px;
      color:black;
      line-height:150%;
      font-weight:normal ;
      font-size:12px;
      background-color:#E3DCBD;
      padding-bottom:20px;
      margin-bottom:12px;
}

#mid div.InnerText
{
      margin-left:12px;
      margin-right:12px;
      margin-top:20px;
      padding:0;
      color:black;     
}

#mid a
{
      color:#A73F00;
      text-decoration:none;
      font-weight:bolder ;    
}

#right{

      margin: 0px;
      float: right;
      width: 185px;
      padding-top:2px;
      padding-right:0px;
      padding-bottom:0px;
      padding-left:0px;
      margin-bottom:12px;
}

#right div.InnerText
{
            padding-left:10px;
}

/*-----------------------fotter--------------------*/

#footer
{
  clear:both;
  border:solid 1px black;
}

#footer div.InnerText
{
        padding:10px;
}

kick it on DotNetKicks.com

This entry was posted on Tuesday, August 18th, 2009 at 1:25 pm and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Build a 3 column layout using CSS, Master Pages and Themes”

  1. thx for sharing!

  2. You are voted!
    Track back from WebDevVote.com

  3. Build a 3 column layout using CSS, Master Pages and Themes…

    DotNetBurner – burning hot .net content…

Leave a Reply