Announcement

Collapse
No announcement yet.

3 Column CSS Layout

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • 3 Column CSS Layout

    A three column CSS (Cascading Style Sheet) layout can be done in multiple ways I am going to show you one way. You will see many fixed layouts out on the net only because it is easier to work with a layout that is a set width rather than a layout that adjusts to fit the users' browser window.

    Lets start with the building blocks. The first code on our page will be a doctype. The doctype tells the browser how to read the code that you write. The basic layout of a page code wise is discussed in Horus_Kol's HTML 101: pt1 - Starting Out.

    We will be using the HTML 4.01 Transitional Doctype which looks like this:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    Using the basic layout of a page on the HTML 101 thread, we would come up with this:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Your Title Here</title>
    </head>
    
    <body>
    Your code here
    </body>
    </html>
    HTML is used to set up the structure of our pages and CSS is used to style our pages. Lets setup the basic structure that we will be using. We are going to have a header, and three columns below the header, and a footer at the bottom.

    Before we add in the header, our three columns, and our footer we need a containing division or div for short. This div will be about 20 pixels less than the widest part of a resolution we want to cater for. We will cater to 800x600 and up resolutions which means our container should be about 780 pixels wide. You ask why it is only 780 pixels and not 800? This is because we have to take into account the vertical scrollbar which takes up about 20 pixels. Remember overall width includes padding and any borders added to the element. With that said lets put in our containing div.
    HTML Code:
    <body>
    <div id="container"></div>
    </body>
    Notice I used an id inside the containing div. That id will be used for the CSS we are going to use. All CSS goes inside the head tags of your page and in between <style></style> tags. An id is declared in CSS by using the # sign followed by the actual id for example in CSS our containing div would be called like so
    Code:
    #container {
    your css here
    }
    In this next step we are going to declare the page margins, padding, and background color, font color and font family for our page using CSS.
    HTML Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Your Title Here</title>
    <style type="text/css">
    html,body {
    margin:0;
    padding:0;
    background-color:#000099;
    color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    </style>
    </head>
    
    <body>
    <div id="container"></div>
    </body>
    The code in between the purple style tags is our CSS for our html, and body elements. Now we are going to add in our CSS for the containing div. I am going to give the div a 1 pixel solid border of black, width a width of 778px.
    HTML Code:
    #container {
    width:778px;
    border:1px solid #000000;
    }
    You want your layout centered? No problem we just use some more CSS. Setting the margins to auto in CSS will center a page provided that the element has a set width. Making the margins auto will work in Internet Explorer only IF there is a valid full doctype on the page like the one we are using.
    HTML Code:
    #container { /*Total width of this div is 780px*/
    width:778px; 
    border:1px solid #000000;
    margin:auto;
    }
    Now we are ready to build the rest of our page using HTML.
    We will put in our header div below.
    HTML Code:
    <body>
    <div id="container">
         <div id="header"></div>
    </div>
    </body>
    A div will expand to fit its container (if no absolute positioning is used) so there is no need to set a width to the header div unless you want it to be less than the width of the container div. We are going to make our header div have a background color dark red with a height of 120 pixels with a 2 pixel bottom margin. Again this will be done in CSS. Since our header div has an id of "header" we will call it by using #header .
    HTML Code:
    #header {
    background-color:#990000;
    height:120px;
    margin-bottom:2px;
    }
    Now lets setup the left column of our layout.
    HTML Code:
    <body>
    <div id="container">
         <div id="header"></div>
         <div id="left-col"></div>
    </div>
    </body>
    Okay now we are going to make our left-div 140 pixels wide and float it left. Using a float will allow block level elements like a div, a pararaph, or a header to be positioned next to the floated element give that there is enough width available for the element.
    Now we will add in our middle column.
    Code:
    #left-col {
    width:140px;
    float:left;
    }
    HTML Code:
    <body>
    <div id="container">
         <div id="header"></div>
         <div id="left-col"></div>
         <div id="mid-col"></div>
    </div>
    </body>
    We are going to make our middle column dark red width a width of 494 pixels with 2 pixel margins on the right, bottom, and left sides of the div. We are also going to float this div left. The CSS is as follows:
    Code:
    #mid-col {
    width:494px;
    margin:0 2px 2px 2px;
    float:left;
    background-color:#990000;
    }
    Now we will setup our right column. Since our right column is going to have the same CSS as our left column we can seperate id's by using a comma.
    HTML Code:
    <body>
    <div id="container">
         <div id="header"></div>
         <div id="left-col"></div>
         <div id="mid-col"></div>
         <div id="right-col"></div>
    </div>
    </body>
    This is the previous CSS from the left column. We will add #right-col after #left-col seperated by a comma.
    Code:
    #left-col, #right-col {
    width:140px;
    float:left;
    }
    Now we will add our footer.
    HTML Code:
    <body>
    <div id="container">
         <div id="header"></div>
         <div id="left-col"></div>
         <div id="mid-col"></div>
         <div id="right-col"></div>
         <div id="footer"></div>
    </div>
    </body>
    We will make our footer 20 pixel in height with the text centered and a background color of dark red. We will need to clear the div so the border on the container can encase the footer div as well.
    Code:
    #footer {
    clear:both;
    text-align:center;
    background-color:#990000;
    height:20px;
    }
    Putting it all together and we get should have this
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>3 Column CSS Layout</title>
    <style type="text/css">
    <!--
    html,body {
    margin:0;
    padding:0;
    height:100%;
    background:#000099;
    color:#FFFFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    #container {
    width:778px;
    margin:0 auto;
    border:1px solid #000000;
    }
    #header {
    height:120px;
    margin-bottom:2px;
    background:#990000;
    }
    #left-col, #right-col {
    width:140px;
    float:left;
    }
    #mid-col {
    width:494px;
    margin:0 2px 2px 2px;
    float:left;
    background:#990000;
    }
    #footer {
    clear:both;
    text-align:center;
    background-color:#990000;
    height:20px;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">#header</div>
    	<div id="left-col">#left-col</div>
    	<div id="mid-col">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, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
    	<div id="right-col">#right-col</div>
    	<div id="footer">3 Column CSS Layout</div>
    </div>
    </body>
    </html>
    I have added in some Lipsum (the latin looking text) to fill in the middle column so you can see the 3 column effect.

  • #2
    Great! Thanks man!

    Comment


    • #3
      Dreamweaver does a great job at this (and its very quick and easy to generate). I perfer handcoding too, so I'd like to recommend CSSDrive.com, they have a lot of free CSS scripts to help you accomplish this very easily.

      Comment


      • #4
        Thanks for sharing this one, keep it up.

        Comment


        • #5
          Hi,
          I use this examples: http://xhtml.ru/2005/11/19/simple-layouts/ to build my own pages. Don't worry if you don't know russian - just look at colored boxes and code inside each.
          --
          Hawaii website design

          Comment


          • #6
            I love and I am interested with this information. Thank you so much for sharing this one.

            Comment


            • #7
              Thanks. It will help me a lot for a better design

              Comment


              • #8
                Thanks. It will help me a lot

                Comment


                • #9
                  Absolutely Brilliant !!!! You are such a genius Keep it up and God Bless.

                  Comment

                  Working...
                  X