Written by Dale Humphries
Welcome to the tutorial. The aim of this tutorial is to show you step-by-step how to create a floating box template from scratch. A floating box is exactly what the name describes; a floating box, fixed in width but fluid in length. Please Note: To do this tutorial you must have some sort of knowledge of basic css.
Let's start. In this tutorial we will not be styling the webites colour scheme or graphics, just constructing the design.
1. The first step invloves setting up a blank index.html file with this line in the head section: <link rel="stylesheet" type="text/css" href="images/style.css" />. If you don't know what this does, it links the HTML file to the css file.
2. Next open up your css file in your favourite editing software, and type this: body { }, then in between the curly brackets, type this: text-align: center;. This ensures that our floating box stays in the center of the page. Then you can change some of the properties for the site as you wish, here is an example:
body {
text-align: center;
font: 12px Arial,sans-serif;
color: #303030;
line-height: 1.4em;
}3. You should know what those extra properties do, so I won't bother explaining them. The next thing to do is to add some divs to the stylesheet, the divs will be named, container, header, left, content and footer. We'll start off with the div, container. This div is what holds everything in the middle of the page - it is essentially our floating box. So in the stylesheet, type this:
#container {
width: 500px;
margin: 90px auto 0 auto;
text-align: left;
border: 1px solid #000000;
}Width, text-align and border are pretty self explanatory, margin is basically saying a 90px margin is needed on the top, 0px on the bottom and automatically margin the sides so it centers. Then you need to add the container div in the html file like so: <div id="container"> </div>.
4. The next div to work on is header. This will sit at the top of the container and will be the same width, and have a fixed height:
#header{
height:85px;
width:500px;
background-color: red;
}5. The next divs will be left and right. Firstly, left, type this below the container div into the css file:
#left {
width: 150px;
background-color: blue;
float: left;
}This makes the div float to the left inside the container, have a blue background and be 150px wide. This div will could be used as a navigation section.
6. Next is the main content, this div is called content. Below the left div in the css file, type this:
#content{
width:330px;
background-color: #ffffff;
float: right;
}This adds a larger section to the right of the left navigation bit. It has a white background and floats to the right.
7. The next step is the footer. This is the last div we will be using in this tutorial, below the content div, type this:
#footer{
width:500px;
height: 40px;
background-color: #ffffff;
clear: both;
}This adds a horizontal bar across the bottom, 40 px high, and 500px wide (the same as the container). Clear: both, this makes sure it clears the left and content divs to sit nicely at the bottom
8. Thats everything for the css section. Now we need to construct the html bit. Open your blank html file and construct it like so:
<html> <head> <title>Your Site</title> <link rel="stylesheet" type="text/css" href="images/style.css" /> </head> <body> <div id="container"> <div id="header">Text Here</div> <div id="left"> Text Here </div> <div id="content"> Text Here </div> <div id="footer">Text Here</div> </div> </body> </html>
9. Then you can add text into each div and style it however you wish.
Thank you for using this tutorial
Edited by Dh89, 18 September 2006 - 07:55 AM.
