Basic CSS layout

We will start with a header.

For this we will set out a div tag and give it the id header.

<div id="header"></div>

Then in our CSS file we will place this code:

#header {
background-color: #FFFFFF;
width:760px;
clear:both;
}

Basically sets the background to white and width to 760 pixels, which means it will fit on a maximised window on an 800x600 resolution.

The clear property means nothing can be to the left or right of the header.

Now we will add another div inside our header div and call it title.

<div id="title">Site Name</div>

So our complete HTML so far looks like this:

<div id="header">

<div id="title">Site Name</div>

</div>

The CSS is as follows:

#title {
color:#CC0000;
background-color:#FFFFFF;
font-size:3em;
font-weight:bold;
padding:0px 0px 0px 0px;
float:left;
}

This removes all padding for the div as well as setting the background to white. #CC0000 is the hex for a dark red which will be our text colour. The font size here is 3em as I have defined the font-size to be usable for people that need different size text. I prefer to use either em or px in my sites.

Now that is our header complete. I am now going to create a horizontal navigation bar.

<div id="nav">
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
</div>

This is just a simple navigation bar, note that in text browsers with no CSS support this will display as:

<a xhref="http://skeletorscorpse.com/joomla/#">Link</a> <a xhref="http://skeletorscorpse.com/joomla/#">Link</a> <a xhref="http://skeletorscorpse.com/joomla/#">Link</a> <a xhref="http://skeletorscorpse.com/joomla/#">Link</a> <a xhref="http://skeletorscorpse.com/joomla/#">Link</a>

For the CSS, we will first define the actual nav div so that we can get the correct formatting for it.

#nav {
padding:2px 0px 2px 0px;
margin:0 0 5px 0;
width:760px;
clear:both;
}

As with the header I have set clear to both so that the content won't be able to move itself next to it. The width is set the same as the header and i've added some padding and a small margin at the bottom of the navigation bar.

Now we need to add the CSS for the actual links:

#nav a {
color: #ffffff;
background-color:#CC0000;
font-weight:bold;
text-decoration:none;
padding:4px 20px 4px 20px;
}

These are all pretty basic properties. Change the padding to what ever you want to change the size of each button.

#nav a:hover {
background-color:#DD0000;
text-decoration:none;
}

This just changes the background slightly on rollover. You can also add some CSS for visited and active links too if you wish.

Now we have our header and navigation bar. Now for the content area. I am creating a 2 column layout so I am going to use a container for both of the smaller content areas.

<div id="content">

</div>

Inside this we will put the rest of our content area.

#content {
border-top:1px solid #CC0000;
width:760px;
clear:both;
}

This CSS as with the header and nav simple sets the width and makes sure nothing appears to the left or right of it. I have also added a border at the top of the content area so its seperated from the nav bar.

I am going to have a large column on the left with a smaller column on the right.

For the left column I need to add another div tag.

<div id="maincontent">

</div>

For the CSS i just set out some simple formatting and added a border to the right so that it is visibly seperated from the 2nd column.

#maincontent {
font-size:1.0em;
padding:0px 5px 0px 0px;
width:550px;
border-right:1px solid #CC0000;
float:left;
}

For the right hand column we need to make it slightly smaller as well as changing the side its floating on:

#sidecontent {
font-size:0.83em;
padding:5px 0px 0px 0px;
width:195px;
float:right;
}

And we will just create another div for our second column:

<div id="sidecontent">

</div>

I will now use the same sort of formatting for the footer, so create your div tag:

<div id="footer">

</div>

Then use this CSS:

#footer {
color: #FFFFFF;
background-color:#CC0000;
font-size:80%;
line-height:1.5em;
width: 760px;
clear:both;
}

I am using this as another container. As I am going to split the footer in to a left and right side.

So we now need to add our CSS for the 2 sections of the footer:

#copyrightdesign {
color:#FFFFFF;
background-color:#CC0000;
padding:5px 0px 5px 20px;
width: 580px;
float:left;
}

#footercontact {
color:#FFFFFF;
background-color:#CC0000;
padding:5px 0px 5px 50px;
width:110px;
float:right;
}

This is all pretty simple and uses the same formatting as the content area.

We now have a full layout with header, navigation, content and footer.

HTML:

<div id="header">

<div id="title">Site Name</div>

</div>

<div id="nav">
<a xhref="http://skeletorscorpse.com/joomla/#">Li
nk</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a>
</div>

<div id="content">

<div id="maincontent">

<h1>Content Header</h1>

<p>
Content Section of page.
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent diam magna, ultrices ac, accumsan eget, elementum id, sapien. Proin ligula mi, molestie sit amet, dapibus id, tincidunt a, odio. Mauris sit amet augue vel eros molestie adipiscing. Ut varius luctus velit. Cras sit amet eros a purus posuere cursus. Phasellus vel urna. Sed ac nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Proin vitae ligula sit amet ligula porta mollis. Morbi dui augue, luctus sit amet, dictum ut, euismod eu, risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean in nibh at erat elementum auctor. Nunc gravida dignissim erat. Curabitur aliquet turpis sit amet justo. Ut ac risus. Sed fermentum massa nec tortor.
</p>

</div>

<div id="sidecontent">

<h1>Latest News</h1>
Here is the latest news from SiteName

<p>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a> Posted by JK on 23/06/05
</p>

<p>
<a xhref="http://skeletorscorpse.com/joomla/#">Link</a> Posted by JK on 20/06/05
</p>

</div>

</div>

<div id="footer">

<div id="copyrightdesign">
Copyright Site Name
</div>

<div id="footercontact">
<a xhref="http://skeletorscorpse.com/joomla/#">Contact</a>
</div>

</div>

CSS:

* {
padding:0;
margin:0;
}

body {
color: #666666;
background-color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.83em;
margin:20px auto;
width:760px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl,
fieldset, address { margin:1em 0;}

h1 {font-size:1.67em;}

h2 {font-size:1.39em;}

h3 {font-size:1.2em;}

h4 {font-size:1em;}

li, dd { margin-left:5%; }

fieldset { padding: .5em; }

a {
color: #FF0000;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #CC0000;
background-color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}

#header {
background-color: #FFFFFF;
width:760px;
clear:both;
}

#title {
color:#CC0000;
background-color:#FFFFFF;
font-size:3em;
font-weight:bold;
padding:0px 0px 0px 0px;
float:left;
}

#nav {
padding:2px 0px 2px 0px;
margin:0 0 5px 0;
width:760px;
clear:both;
}

#nav a {
color: #ffffff;
background-color:#CC0000;
font-weight:bold;
text-decoration:none;
padding:4px 20px 4px 20px;
}

#nav a:hover {
background-color:#DD0000;
text-decoration:none;
}

#content {
border-top:1px solid #CC0000;
width:760px;
clear:both;
}

#maincontent {
font-size:1.0em;
padding:0px 5px 0px 0px;
width:550px;
border-right:1px solid #CC0000;
float:left;
}

#sidecontent {
font-size:0.83em;
padding:5px 0px 0px 0px;
width:195px;
float:right;
}

#footer {
color: #FFFFFF;
background-color:#CC0000;
font-size:80%;
line-height:1.5em;
width: 760px;
clear:both;
}

#footer a {
color: #FFFFFF;
background-color: #CC0000;
text-decoration: none;
font-weight: bold;
}

#footer a:hover {
text-decoration: underline;
}

#copyrightdesign {
color:#FFFFFF;
background-color:#CC0000;
padding:5px 0px 5px 20px;
width: 580px;
float:left;
}

#footercontact {
color:#FFFFFF;
background-color:#CC0000;
padding:5px 0px 5px 50px;
width:110px;
float:right;
}

As you can see I have added some additional CSS for the formatting of the text etc.

Finished site can be found here