How can I stop the content overlapping the navigation

Float Left problems

[kegan5]

I have the following CSS code, the parts in bold are the ones causing me problems.

@charset "utf-8";
/* CSS Document */

body {
text-align:center;
background:url(../images/kwb_background.jpg);
}
#frame {
width:1024px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}
[b]#contentleft {
width:200px;
padding:0px;
float:left;
background:#fff;
}[/b]
#contentcenter {
width:612px;
padding:0px;
float:left;
background:#eee;
}
#contentright {
width:200px;
padding:0px;
float:left;
background:#fff;
}
#contentheader {
background:transparent;
padding-left: 200px;
}
[b]#navigation {/*position:relative;*/ margin-left:200px; padding-right:200px; width:1024px;}
#navigation ul 
{
list-style:none;
padding:20px;;
margin:0;
}
#navigation li 
{ 
float: left;
margin: 0 0.15em;
}
#navigation li a{
padding:3px; 
font-family:Arial;
color:#d5d5d5;
text-decoration:none;
display:block;
text-align:center;
}

#navigation h1 a {
font-size:60px;
}
#navigation h2 a{
font-size:40px;
}
#navigation h3 a{
font-size:35px;
}
[/b]
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}
#contentright p { font-size:10px}

The Left content bar is moving up and coming out of alignment with center and right content bar.

I know this has something to do with a float left but I thought I had set the width of navigation to 1024, which is the full width of my site.

So shouldn't the left content bar be pushed down ?

[penders]

#navigation {/*position:relative;*/ margin-left:200px; padding-right:200px; width:1024px;}
...I thought I had set the width of navigation to 1024...

The total width of your #navigation is 1024 + 200 + 200 = 1424px (unless you are seeing this in IE quirks mode). width refers to the content width, excluding padding, margins and borders.

#navigation ul { 
list-style:none; 
padding:20px;; 
margin:0; 
}

You also have an extra semi-colon here.

[kegan5]

If I set it to 1424 and the total Frame (wrapper) width is 1024px, I still can't see how it's wrapping up next to the navigation ?

I have removed the additional ';' I hadn't spotted that, thankyou :)

[kegan5]

Ah I think I've sorted it, I added a height to the navigation :)