btw - here is the original code as I keep changing it on the initial link while i try stuff out!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style_FS.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="header"></div> <!-- header -->
<div id="leftnav">
<div class="navbox">
<a href="quality.php">Quality Assurance Programmes</a>
</div>
<div class="navbox">
<a href="staffing.php">Quality Assurance On Demand</a>
</div>
<div class="navbox">
<a href="lossassessment.php">Loss Assessment</a>
</div>
<div class="navbox">
<a href="#">Food Safety Training</a>
</div>
<div class="navbox">
<a href="#">International Business Development</a>
</div>
<div class="navbox">
<a href="#">Hygiene Audits</a>
</div>
</div> <!-- left nav-->
<div id="rightnav">
<div class="navbox2">
<h3>Customer Testimonials</h3>
<p>Rotating content to be provided.</p>
<p>» <a href="#">More</a></p>
</div>
<div class="navbox2">
<h3>News</h3>
<p>Content to be updated monthly</p>
<p>» <a href="#">More</a></p>
</div>
<div class="navbox2">
<h3>Training Programs</h3>
<p>Dates etc to be updated regularly</p>
<p>» <a href="#">More</a></p>
</div>
</div> <!-- right nav-->
<div id="content">
<p>Food Surveys is a privately owned and independent company providing inspection, assessment and consultancy solutions to the food industry around the world. </p>
<p>Over the past 12 years the company has become a leading supplier of quality assurance, product inspection, hygiene auditing, food industry training and the provision of temporary technical personnel to major food companies and government agencies both within the United Kingdom and internationally. Our organisation has the facility to offer a true ‘farm to fork’ level of service.</p>
<p>The company continually focuses on adding value, to ensure that compliance to a technical standard or legislative requirement is combined with the commercial benefits of good operation, be this reduced wastage, more efficient management or a competitive advantage gained through improved product quality and safety.</p>
</div> <!-- content -->
</div><!-- wrapper -->
</body>
</html>
CSS
/* LAYOUT */
html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color:#403D77;
}
#wrapper{
width:850px;
min-height:100%;
margin:10px auto;
position:relative;
border:5px solid #999999;
}
#header{
background-image:url(images/header2.jpg);
width:850px;
height:200px;
position:absolute;
top:0px;
left:0px;
}
#leftnav{
width:200px;
min-height:100%;
position:absolute;
top:200px;
left:0px;
background-color:#FFFFFF;
}
#rightnav{
width:200px;
min-height:100%;
position:absolute;
top:200px;
right:0px;
background-color:#EBEBEB;
}
#content{
position:absolute;
top:200px;
left:200px;
width:430px;
padding:10px;
min-height:100%;
background-color:#EBEBEB;
}
.navbox{
width:160px;
margin:10px auto;
padding:10px;
background-color:#FFFFFF;
border-bottom:1px dotted #cccccc;
}
.navbox2{
width:160px;
min-height:100px;
margin:10px auto;
padding:10px;
background-color:#fff;
border:1px dotted #CCCCCC;
}
/** BASIC */
/* TEXTS */
body, th, td, input, textarea, select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.80em;
line-height:1.3em;
color: #656565;
}
p, blockquote, ul, ol, dl {
margin-top: 0px;
text-align: justify;
}
strong {
color: #666666;
}
.text1 {
margin-bottom: 30px;
font-size: 14px;
font-weight: normal;
color: #D4D4D4;
}
.text2 {
color: #557400;
}
.text3 {
text-align: center;
color: #6E889A;
}
/** HEADINGS */
h1, h2, h3, h4, h5, h6 {
margin: 0px;
color: #595959;
}
h1 {
font-size: 2em;
font-weight: normal;
line-height:1.5em;
font-variant:small-caps;
margin-bottom:5px;
}
h2 {
font-size: 1.4em;
font-weight: normal;
line-height:1.5em;
font-variant:small-caps;
}
h3 {
font-size: 0.9em;
font-variant:small-caps;
}
/** LINKS */
a {
color: #595959;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}