Im making a site template, but iv never made one before (Well once but it sucked) and im currently making my first style sheet.. anyhow i have this messed up problem. il show you my code first:

CSS:

#contentbg {
    width: 700px;
    float: left;
    background: url(images/contentbg.jpg);
    margin-left: 20px;

}
#contenttop{
    width: 700px;
    float: left;
    height: 18px;
    background: url(images/contenttop.jpg);
    margin-left: 20px;
}
#contentbottom{
    width: 700px;
    float: left;
    height: 18px;
    background: url(images/contentbottom.jpg);    
    margin-left: 20px;
}
#content{
    width: 650px;
    float: left;
    margin-left: 20px;
    padding-left: 5px;
}

Template code (the part causing problems):

<div id="contenttop">
</div>
<div id="contentbg">
    <div id="content">
    **content goes here**
   </div>
</div>
<div id="contentbottom">
</div>




<p>
<center>
<font size="1"><a href="index.php?module=about">About</a> :: <a href="index.php?module=staff">Staff</a> :: <a href="index.php?module=contact">Contact</a> :: <a href="index.php?module=jobs">Jobs</a></font>
</center>

Basicly whats happening is when i have the float: left; on my style sheet its pushing the footer onto the top right of the page (the stuff with links to staff, about etc.). when i take the float off everything looks ok...except that there is a weird gap between my bottom div and the one above it. Iv been trying to figure this our for a few hours now and nothing works! Help will be greatly apreciated.

Rather difficult to know which is the one with "(the stuff with links to staff, about etc.). "


get rid of the deprecated <center> and <font> stuff for a start

to centre a container use a fixed width and margin:npx auto;

to stop the footer (whichever one it is) "floating" to the side you need to "break" the float by adding a clear:right or clear:both to the footer div.

Alright thanks, it worked

now I have another problem though. I have a sidebar im trying to put on the page, but some more weird stuff is happening: (screenshot) http://www.ncrusaders.com/random/error.jpg

here is the css that defines it:

#sidebarbg{
    width: 131px;
    float: right;
    clear: left;
    background: url(images/sidebarbg.jpg);

}
#sidebartop{
    width: 131px;
    float: right;
    clear: left;
    height: 20px;
    background: url(images/sidebartop.jpg);

}
#sidebarbottom{
    width: 131px;
    float: right;
    clear: left;
    height: 20px;
    background: url(images/sidebarbottom.jpg);

}

and the html...

<div id="sidebartop">
</div>
<div id="sidebarbg">
test
</div>
<div id="sidebarbottom">
</div>

again it's hard to say exactly without seeing the actual page and the entire code, but when you float something right and clear the left side of the same element the chances of success are fairly slim.

At a guess creating a container sized to hold all three elements and floating that one right should give the effect I assume you are trying to achieve

Yay! Finaly all my problems have been solved today thanks a ton