CSS Layout tutorial
This tutorial covers some basic CSS layout and positioning techniques. We cover this topic and other CSS techniques in much more detail in our Web development ebook
With CSS you can style your documents and position elements within your web pages. The previous tutorial covered styling and formatting techniques.
CSS layout has the following advantages over traditional table layout
- pages load faster
- easier to maintain and modify
- more flexibility
- separates content and structure
- your site can have different "skins"
- web pages are better structured and more meaningful (semantic)
Lets create a basic layout with a top navigation bar, a right-column, a header, a main content area to the left of the right-column and finally a footer below the main content and the right-bar.
Step 1. The top navigation bar
The above is quite easy. All we use is some basic CSS which we attach to a division tag. On an HTML page create a divison called navbar and set its id attribute to "navbar" like so:
<div id="navbar">
<h3 align="center">This is the top navigation bar</h3>
</div>
Now we create the CSS code in our style sheet.
The CSS code is as follows:
#navbar {
width: 400px;
height: 50px;
background-color:#FFFF00;
}
Step 2. The right-column
This is
right hand
column
Create a division tag in your HTML page
with id="right-column".
<div id="right-column">
<h4>This is <br />
right hand <br />
column </h4>
</div>
In your style sheet, enter the following code:
#right-column {
float: right;
width: 100px;
height: 100px;
padding: 10px;
background: #CC6699;
}
Step 3. The Header
This is the page header
You can put your logo etc here
The code for this is simlar to that of the navbar.
The HTML:
<div id="site-header">
<h3>This is the page header<br />
You can put your logo etc here <br />
</h3>
</div>
and the CSS
#site-header {
width: 500px;
height: 100px;
padding: 5px;
background: #CC66CC;
}
Step 4. Main Content
The main content is virtually defined to the left of the right-hand column. However we create a division and set some boundary.
The HTML
<div id="main-content">
<h3>This is the main content<br />
If you've read anything .......
</h3>
</div>
The CSS
#main-content {
margin-right: 200px;
padding: 5px;
line-height: 1.5;
}
This is the main content
If you've read anything at all about Content Management Systems (CMS), you'll probably know at least three things: CMS are the most exciting way to do business, CMS can be really, I mean really, complicated and lastly Portals are absolutely, outrageously, often unaffordably expensive.
Joomla! is set to change all that ... Joomla! is different from the normal models for portal software. For a start, it's not complicated. Joomla! has been developed for the masses. It's licensed under the GNU/GPL license, easy to install and administer and reliable. Joomla! doesn't even require the user or administrator of the system to know HTML to operate it once it's up and running
Step 5. The Footer
The HTML
<div id="site-footer">
<h3>This is the footer. You can put copyright, privacy and other disclaimer and contact links here<br />
</h3>
</div>
The CSS
}
#site-footer {
background-color:#FFFF00;
width: 500px;
height: 60px;
clear:both;
border-top: 2px solid #000000;
}
Putting it together
Add a page-container division.
<div id="page-container">
The closing division tag will be the last - just before the </body> tag.
Add the following CSS
#page-container {
width: 60%;
margin:auto;
}
When we put the HTML together it should be as follows:
<div id="page-container">
<div id="navbar">
<h4 align="center">This is the top navigation bar</h4>
</div>
<div id="right-column">
<h4>This is <br />
right hand <br />
column </h4>
</div>
<div id="site-header">
<h3>This is the page header<br />
You can put your logo etc here <br />
</h3>
</div>
<div id="main-content">
<h3>This is the main content<br />
If you've read anything at all about Content Management Systems (CMS), you'll probably know at least three things: CMS are the most exciting way to do business, CMS can be really, I mean really, complicated and lastly Portals are absolutely, outrageously, often unaffordably expensive.
Joomla! is set to change all that ... Joomla! is different from the normal models for portal software. For a start, it's not complicated. Joomla! has been developed for the masses. It's licensed under the GNU/GPL license, easy to install and administer and reliable. Joomla! doesn't even require the user or administrator of the system to know HTML to operate it once it's up and running
<br />
</h3>
</div>
<div id="site-footer">
<h3>This is the footer. You can put copyright, privacy and other disclaimer and contact links here<br />
</h3>
</div>
</div>
</body>
We can tidy up our CSS a bit as follows:
In the CSS
#footer - remove the width constraint
#site-header - replace width with : margin-right: 20px;
#main-content - margin-right: 50px;
Here is the complete CSS for our example
#page-container {
width: 60%;
margin:auto;
}
#navbar {
width: 400px;
height: 50px;
background-color:#FFFF00;
}
#right-column {
float: right;
width: 100px;
height: 380px;
padding: 10px;
background: #CC6699;
}
#site-header {
margin-right: 20px;
height: 100px;
padding: 5px;
background: #CC66CC;
}
#main-content {
margin-right: 50px;
padding: 5px;
line-height: 1.5;
}
#site-footer {
background-color:#FFFF00;
height: 20px;
clear:both;
border-top: 2px solid #000000;
}
And the page should look similar to this one CSS Layout Example
For a more comprehensive and detailed study of CSS and (X)HTML please try our Web Developers Ebook which covers (X)HTML and CSS.
Have not found what you looking for, try searching Google. Simply use the search box below: