Pete Finnigan's Oracle Security Forum


    
      
        Pete Finnigan's Oracle Security Forum
        (http://www.petefinnigan.com/forum/yabb/YaBB.cgi)
      

        Web Development >> Web Development >> The HTML Code for a Basic 2 Column Website
        
(Message started by: Pete Finnigan on Mar 7^th, 2009, 11:10am)

Title: The HTML Code for a Basic 2 Column Website
Post by Pete Finnigan on Mar 7^th, 2009, 11:10am

The HTML part of the code is fairly simple. Web Programmers basically need 2 div blocks, one for each column.

<div id="container">
<div id="navbar">Navigation</div>
<div id="content">Content here</div>
</div>

The words "Navigation" and "Content here" are merely placeholders for the navigation side bar and main content. You should remove those words when you put your real content. The "container" div block is merely a block enclosing both the two columns, and is useful if you want to apply certain styles that affect both columns as a unit.

If you want a website where your page widths expand or contract according to how large your visitor's browser window is, you should use relative widths for your columns. At the time I write this, thesitewizard.com uses such a fluid layout as well. For example, if you change the size of your browser window, your browser will reformat this article as far as possible to fit within the window (unless you resize it too small).

The CSS code for this is simple.

#content {
margin-left: 20%;
}
#navbar {
float: left;
width: 20%;
}