Hey

Im an extreme novice when it comes to CSS layouts so bear with me and the no doubt simplicity of this problem. Ive tried to make a very simple layout completely with CSS. It worked perfect until i tried to add a horizontal 'list' menu instead of simply formatted hyperlinks

After i added this the menu displays fine but the main content DIV was shifted to the right by an entire page width. i.e. the header and menu is shown fine then you scroll completely to the right the header and menu stop and the main content displays fine - just in the wrong place.

My (no doubt poor) code is below, hope this is clear!

Page:

<div id="header">
		<span class="site_header">Strathendrick</span>
		<span class="subheader">classic car club</span>
<div id="image"><img src="pic_r1_c3.jpg"><div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" >Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

<div id="bar">
</div>
<div id="content">

Content here

</div>

CSS:

#header {
	background: url(pic_r1_c1.jpg) no-repeat;
	background-color: #5F6072;
	height: 125px;
	width: 100%;
	text-align: left;
	margin: 0 auto;
}

#header img {
	float: right;
	padding-right: 15%;
}

.site_header{
	position:absolute;
	margin-left:55px;
	margin-top:30px;
	font-size:2.5em;
	color:#ffffff;
}

.subheader{
	position:absolute;
	margin-left:145px;
	margin-top:70px;
	font-size:1.5em;
	color:#EBFFEB;
}



#content {
	position: absolute;
	top: 173px;
	background-color: #ffffff;
	padding-left: 80px;
	padding-right: 80px;
	padding-top: 15px;
	width: 100%;
	width: 80% !important;
}

#content h1 {
	font-size:1.45em;
	padding:3px;
	margin:15px 5px 5px 2px;
	border-top:2px solid #DF6327;
	border-left:2px solid #DF6327;
}


#bar {
	position: absolute;
	top: 160px;
	background-color: #E0DCDD;
	height: 13px;
}

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #DF6327;
color: White;
float: left;
width: 100%;
font-family: verdana;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #DF6327;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #EB9D78;
color: #fff;
}

Cheers
Stoot

Well, for on thing you need to get rid of all that position:absolute, it's not necessary and does cause problems. Use floats and the normal document flow to achieve your layout.

A couple of things:
-get rid of the <span>s in the header and use proper heading (h1-h6) tags, style them in your CSS. Change your <span class=xxx> to <h1 class=xxxx>.

The problem with your #content div is that it follows a float.. but you have not CLEARED that float. So the content div is right where you told it to go.. to the right of the floated #navcontainer

So this would be my solution:

<div id="header">
<img src="pic_r1_c3.jpg">
<h1 class="site_header">Strathendrick</h1>
<h2 class="subheader">classic car club</h2>

</div>

<div id="navcontainer">
<ul id="navlist">
<li><a href="#" >Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>

<div id="bar"></div>
<br class="brclear" />
<div id="content">

Content here

</div>

body{
margin: 0;
padding; 0;

}
#header {
background: url(pic_r1_c1.jpg) no-repeat;
background-color: #5F6072;
height: 125px;
width: 100%;
text-align: left;
margin: 0 auto 50px auto;
}

#header img {
float: right;
padding-right: 15%;

}

.site_header{

/*position:absolute;*/
margin: 0px 0 0 55px;
/*margin-left:55px;
margin-top:30px;*/
font-size:2.5em;
color:#fff;
padding: 30px 0 0 0;

}

.subheader{
/*position:absolute;*/
margin: 10px 0 0 145px;
/*margin-left:145px;
margin-top:10px;*/
font-size:1.5em;
color:#EBFFEB;
padding: 0;

}

#content {
/*position: absolute;*/
/*top: 173px;*/
background-color: #fff;
padding-left: 80px;
padding-right: 80px;
padding-top: 0px;
width: 100%;

}

#content h1 {
font-size:1.45em;
padding:3px;
margin:15px 5px 5px 2px;
border-top:2px solid #DF6327;
border-left:2px solid #DF6327;
}


#bar {
/*position: absolute;*/
/*top: 160px;*/
background-color: #E0DCDD;
height: 13px;
width: 100%;
margin: 0;
padding: 0;

}

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #DF6327;
color: White;
float: left;
width: 100%;
font-family: verdana;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #DF6327;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #EB9D78;
color: #fff;
}

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Excellent! Thanks!

Couple of other follow up questions...

When i make the css changes the image in the header doesnt stay at the top of the page but is displayed below the rest of the header. Im not sure how to sort this out so any suggestions would be appreciated.

Also, at the moment the menu items are aligned to the left of the menu DIV. Is there anyway to align these items in the middle of the DIV?

Thanks again LadyNRed!

Did you change the html for the header image as I posted it ? I took the image OUT of the div.. you don't need a div to float the image.