Creating a Pure CSS layout
May7Written by:
2009/05/07 01:23 PM 
Websites and web development software were never meant for desktop publishing. Because of this there were certain limitations that had to be worked around. One of them being layout. In DTP, you could easily layout your copy with little effort. But for the web this is not so.
Traditionally webmasters have been able to achieve website layouts with the use of tables. But tables are very cumbersome and heavy, as well as having their own set of problems. Nowadays the preferred method is to use CSS for layout. But moving to something new is often scary. If we take the move a little at a time then it will all be manageable and less daunting.
Today we are going to look at creating a simple website layout using pure CSS. If you do not know CSS stands for Cascading Style Sheets.
So why would anyone want to or need to go the CSS layout route. CSS is easier for search engines to read and index. If you are serious about SEO, then you should consider CSS layouts for your website. Complicated table layouts can become a nightmare to maintain and update. Most time CSS code can be a lot lighter than table layout code, making your site just that bit faster to download.
Tables are not evil. They do have a purpose within standards based web design (for the display of tabular data); however, if at all possible, you should not use them to create the main layout of an html page.
The main tag we use in a CSS layout is the < div> tag. Within the div tag, we can use properties and values to describe the div element. This can be very powerful. We can change size, position, colour, almost anything you want within the CSS rules.
We are going to design a simple 2 column layout with a header and footer. We start with the basic HTML mark-up. Then within the body tag, we will make use of the div element. Our finished layout will look something similar to the diagram below:
| Header |
| Navigation |
Content |
| Footer |
The basis of the layout is the div element. Below is the basic structure.
<div id="container">
<div id="header">
div>
<div id="wrapper">
<div id="content">
div>
div>
<div id="navigation">
div>
<div id="footer">
div>
div>
The div elements are rendered from top to bottom. Leaving the elements as they are will just render them in a paragraph fashion. From top to bottom. By default the div element will fill its own container to 100%. If the content is smaller, it will resize to suite.
The header and footer div elements will be left as they are, because there is no specific arrangements that need tweaking. What we want is the Navigation div element to be on the left of the Content element. To do this we use a fantastic property called the float property. The float property has three possible values, left;right; none. When left or right property is used, the element is arranged to line up flush with the next or previous element in the DOM.
We wrap the content element in another div wrapper for ease of use. You do not have to do this, but it makes life simpler when adding other elements, like more divs, to the content div element. It is this div element that we add the floating property to with a value of “right”, and we will add a width percent value.
To do this we add a CSS rule:
div#wrapper {float:right;
width:70%
}
This will float the “Wrapper” container and everything in it to the right most position relative to any other elements. Now we need to do something similar for the navigation, but this time we will float left, and add a width percentage.
div#navigation {float:left;
width:29.9%
}
The next thing to do is to make sure that the Footer div element does not inherit any positioning. We employ the following rule to the footer element.
div#footer {clear:both;
width:100%;
}
We have wrapped everything inside a Div container. The only thing left now is to add any other styling that suites your website. Like padding, line height, margins, etc. The final code could look like below. I hope you enjoy.
You can also navigate to http://layouts.ironmyers.com/ for more Free CSS layouts to download.
The CSS and HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Css Layout</title>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {margin:0;
padding:0
}
body {font: 76% arial, sans-serif
}
p {margin:0 10px 10px
}
a {display:block;
color: #981793;
padding:10px
}
div#header h1 {height:80px;
line-height:80px;
margin:0;
padding-left:10px;
background: #EEE;
color: #79B30B
}
div#content p {line-height:1.4
}
div#navigation {background:#B9CAFF
}
div#extra {background:#FF8539
}
div#wrapper {float:right;
width:70%
}
div#navigation {float:left;
width:29.9%
}
div#footer p {margin:0;
padding:5px 10px
}
div#footer {background: #333;
color: #FFF;
clear:both;
width:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="navigation">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Technorati Tags:
CSS,
Layout,
Table-less