I have the header and then two inner divs to the header, one for the left and one for the right. Now I cannot get them to line up or show the background image correctly.
Also my nav bar will not sit on the top of the maintextarea, instead it has decided to lift itself up.
I enclose the code.
Code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content=">
<meta name="description" content="" />
<title></title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><div id="left_header"><h1><a href="index.html" title="Lee Oasis Furniture Project HomePage">
<img height="86" alt="logo" src="logo.gif" width="231" /></a></h1></div><div id="right_header"><p>Re-use Re-cycle</p></div></div><div class="clear"></div>
<div id="nav">
<ul class="nav">
<li><a href="index.html">Menu</a></li><li><a href="index.html">Project</a></li><li>
<a href="index.html">Links</a></li>
<li><a href="index.html">Link 1</a></li><li><a href="index.html">Link 2</a></li><li>
<a href="index.html">Link 3</a></li>
<li id="last"><a href="index.html">Link 4</a></li></ul>
</div>
<div class="clear"></div><div id="main_textarea">
<div class="textbox_outer">
<div class="textbox_inner">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede
justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, Quisque rutrum. Aenean
imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante
tincidunt tempus. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus,
sem quam semper libero, sit amet adipiscing sem neque sed ipsum. </p></div>
<div class="clear"></div><div id="footer"><p>Copyright © 2010</p>
</div></div></div></div>
</body>
</html>
the css is
Code:
html body #container {
height: 99.5%;
width: 65%;
}
html {
margin: 0;
padding: 0;
}
body {
text-align: center;
font-size: 1em;
font-family: Helvicta, Arial, Sans Serif;
height: 1%;
line-height: 1.5;
background: #fff;
}
#container {
text-align: left;
margin: 0 auto;
padding: 0;
}
img, img a {
border: 0px;
}
a:link {
color: #00CC00;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: green;
font-weight: bold;
text-decoration: none;
}
a:hover, a:active {
color: #CCCCCC;
font-weight: bold;
text-decoration: underline;
}
#nav {
height: 65px;
width: 95%;
margin: 0 auto;
}
#nav ul {
width: 95%;
margin: 0 auto;
}
#nav ul li {display: inline; list-style: none;}
#nav ul li a{
width: auto;
text-align: center;
text-decoration: none;
margin: 0;
padding: 2%;
border-right: 1px solid #660066;
font-size: 1.10em;
font-weight: bold;
color: #660066;
text-transform: uppercase;
}
#nav a:hover {text-decoration: underline; background-color: #CCC; padding: 2%;}
#nav ul li#last a{border-right: 0;}
#header {
display: block;
width: 95%;
padding-top: 3%;
padding-bottom: 3%;
padding-left: 5%;
background: #fff;
margin: 0 auto;
}
#right_header {background: #CCC url('recycle_cm1.jpg');
background-repeat: no-repeat;
width: 45%;
margin-left: 45%;
}
#left_header {width: 45.5%; float:left; position: relative;}
h1 {color: #000; font-family: sans-serif, Arial Black, helvicta}
h1 a:visited {color: green; text-decoration: none;}
h1 a:link {color: #000; text-decoration: none;}
h1 a:hover, a:active {color: #CCC; text-decoration: none;}
h2 {color: #3B6B9C; margin-bottom: 5%;}
h3 {color: #3399CC;}
#maintextarea {float:left; width:99.5%;}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
.textbox_outer {
background: #33CC33;
border: 1px solid #CCC;
width: 90%;
}
.textbox_inner {background: #fff;
width: 80%;
padding: 5%;
margin: 5%;}
#footer
{
height:40px;
background:#CCC;
width:99.6%;
text-align: right;
font-weight: bold;
padding-right: 3px;
padding-top: 3px;
}
Its been awhile since I have done css and I am at a loss on where to start to fix things. Though I have tried.
url puddypaws.co.uk/test.html
I needed to give the header an height of 150px, as it would not show with height: auto; so that problems is fixed now.
Before you post, read our: 
