Author |
Topic: The HTML Code for a Basic 2 Column Website (Read 1996 times) |
|
mark123
PeteFinnigan.com Newbie
I love YaBB 1G - SP1!
View Profile |
Posts: 1
|
 |
The HTML Code for a Basic 2 Column Website
« on: Mar 7th, 2009, 11:10am » |
Quote | Modify
|
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%;
}
|
| « Last Edit: Mar 9th, 2009, 2:40pm by Pete Finnigan » |
 IP Logged |
|
|
|
|
