CSS Web Page Layouts
Laying out your web pages involves deciding how to divide up the contents. Before you do anything, you need to know where you want each section on your page to appear. After that its all a matter of applying some coding.
The first thing that you want to do in laying out your web page, is to divide each section of your page using the division tag. You want to divide it in some logical fashion.
For example lets say you wanted to make a typical web page that has a title at the top of the page, a table of content sidebar on the right of the page, and a main content area in the center of the page. You could then divide the title into a division of its own, the content sidebar in its own division, and the main content area in its own division. And to make things much easier for coding, you could then encompass all of these division inside one large outter division.
Example code:
<body>
<div id="outter">
<div id="title">THIS IS MY TITLE</div>
<br />
<div id="main">
The main contents of my page will be here. SOme Sample Text
The main contents of my page will be here. SOme Sample Text
The main contents of my page will be here. SOme Sample Text
The main contents of my page will be here. SOme Sample Text
The main contents of my page will be here. SOme Sample Text
</div> <!---closes "main" division--->
<div id="sidebar">Table of Contents
<ul>
<li>Item in content</li>
<li>Item in content</li>
<li>Item in content</li>
<li>Item in content</li>
<li>Item in content</li>
<li>Item in content</li>
<li>Item in content</li>
<li>Item in content</li>
</ul>
</div> <!---closes "sidebar" division--->
</div> <!---closes "outter" division--->
</body>
Once that is done, then you can think of each one of these division as an item on the web page and you could move and arrange these items as you like. This is actually a pretty easy process if you can imagine that the large outter division is like a blank canvas, and that you arrange the other divisions and place them where you like on top of the blank convas.
Next: CSS Adjust The Height And Width Of Elements