September 12th in Design, PHP Scripts by .

How to design 3 Column Website Layout with Top Navigation Menu in CSS

CSS as we go deeper and deeper it gets harder and harder to understand, especially margins, padding and floats could be confusing at times as well. I am going to post here the tutorial to make a very simple CSS website layout (skeleton) with

- Container
- Header
-Top Navigation Menu
- Left Navigation Menu
- Right Navigation menu
- Content Part
- Footer

All elegantly stacked one by one with divs and with css stylesheet. This is a very basic skeleton. The most important css code are highlighted in the picture. The basic concept is shown below.

3col-pic_03.png

Code Flow
Notice carefully the div stacked. A container holds all those header, content, and menus.


<div id=container>
      <div id="header">
        <h2>Header</h2>
      </div>
    <div id="topnav-container">
        <ul id="topnav">
        <li> <a href="#">Home</a> </li>
        <li> <a href="#">Categories</a> </li>
        <li> <a href="#">Services</a> </li>
        <li> <a href="#">About us</a> </li>
        <li> <a href="#">Contact us</a> </li>
        </ul>
    </div>
     <div id="leftnav">
      This is a left navigation bar.
      This is a left navigation bar
      This is a left navigation bar
     </div>
     <div id="rightnav">
      This is a right navigation bar
     </div>
     <div id="content">
         <p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
     </div>
     <div id="footer">
        <h2>Footer</h2>
     </div>
   </div>

CSS Code

The CSS code is shown below for the above skeleton.

#container {
    margin: 10px auto;
    width: 95%;
    border: 1px solid gray;
}
#header {
    padding: 3px;
    border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}

#topnav {
margin:0;
padding: 0;
}

#topnav li  {
    display: inline;
   list-style: none;

}
#topnav li a {

    text-decoration: none;
    padding: 0px 5px;
    color: #333;

}

#leftnav {
    float: left;
    width:150px;
    padding: 5px;
    margin:0;

}
#rightnav {
    width: 150px;
    float:right;
    padding: 5px;
    margin:0;

}
#content
{
    margin: 0 180px 0 180px;
    padding: 1em;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    font-family:  "Times New Roman",sans-serif ,arial, helvetica;
    font-size: 1.0em;
    line-height: 1.6em;

}
#footer {
    clear:both;
    padding: 0 3px;
    border-top: 1px solid gray;

}

Download source code:3colcsstut.zip

Similar Posts:

6 Comments

  • John S
    January 27, 2009
  • TiCAL
    April 6, 2010
  • Ria
    February 9, 2011
  • Gareth
    February 10, 2011
  • URLJOB New York Jobs
    August 12, 2011

Leave A Comment.