CSS - positioning Footer Top Border?

Please Help - Centered or preferably Right

[macattak1]

Greetings and my First post.

Using Expressions web. This is my first time using CSS template for my site. I know very little about CSS and I am no pro at HTML either. I have taken the time to search and search and read posts here and everywhere but I am unable to find anything about centering or justifying borders in CSS. Probably can not be done, but would like to know it if can before I do it another way. Especially since I have spent 2 hours + on this now. Code I have found for centering other objects has not worked.

I have the Container with masthead, (left) nav, content, and footer.

In the footer I have the text/links centered. I am using a top border on the footer on a page that is 900px wide. I can set the border width and center it over the text/links. However, what I really want is to Right align the top border and set the width so that it matches the above Content but does not flow left under the Nav.

I have tried playing with the style and such and nothing. Any invalid info places the border far left or the complete footer far left...

Thank you and Peace and Blessings

#footer {
text-align: center;
clear: both;
width: 400px;
padding-top: 10px;
padding-bottom: 5px;
border-top: 1px #dcdcdc solid;
border-right: 0px solid #a9a9a9;
border-bottom: 0px solid #808080;
border-left: 0px solid #a9a9a9;
background-color: #fefeff;
}

----------------------------------------

In case it is needed here is the complete.

@import url("layout.css");
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #f2f2f7;
background-image: url("../images/background.gif");
background-repeat: repeat;
background-attachment: scroll;
}
#container {
width: 900px;
margin: 3px auto;
}
#masthead {
text-align: center;
width: 900px;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 1px solid #808080;
border-left: 1px solid #a9a9a9;
background-color: #fafaff;
}
#navigation {
position: relative;
float: left;
width: 148px;
margin-top: 3px;
margin-bottom: 3px;
border-top: 0px solid #dcdcdc;
border-right: 1px solid #a9a9a9;
border-bottom: 0px solid #808080;
border-left: 0px solid #a9a9a9;
background-color: #fff;
}
#content {
float: left;
width: 518px;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 3px;
padding: 3px;
border-top: 1px solid #dcdcdc;
border-right: 0px solid #a9a9a9;
border-bottom: 0px solid #808080;
border-left: 0px solid #a9a9a9;
background-color: #fff;
}
#footer {
text-align: center;
clear: both;
width: 400px;
padding-top: 10px;
padding-bottom: 5px;
border-top: 1px #dcdcdc solid;
border-right: 0px solid #a9a9a9;
border-bottom: 0px solid #808080;
border-left: 0px solid #a9a9a9;
background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
color: #3d6c87;
}
#masthead h3 {
color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 100%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a {
color: #000099;
text-decoration: none;
display: block;
padding: 5px;
border: 1px solid #fff;
background-color: #fff;
}
#navigation a:hover {
color: #fff;
text-decoration: none;
border: 1px solid #5f8ea9;
background-color: #5f8ea9;
}
/* Content Styles */
h6 {
color: #3d6c87;
}
h5 {
color: #3d6c87;
}
h4 {
color: #3d6c87;
}
h3 {
color: #3d6c87;
}
h2 {
color: #3d6c87;
}
#content h1 {
color: #3d6c87;
}
#content img {
padding: 3px;
border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
color: #808080;
margin-top: 5px;
}
#footer a {
color: #0033CC;
text-decoration: underline;
}
#footer a:hover {
color: #33627d;
text-decoration: none;
}
a {
color: #000000;
text-decoration: underline;
}
a:hover {
color: #33627d;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}

[Setek]

I'm guessing what you want is to have the footer sit horizontally in line with the content

div

(which is sitting ~ 151px from the left edge,) and have it the same width.

Since the

#container

is at a fixed-width, couldn't you just:

1. Remove the fixed-width on your

   #footer

   , so it takes up all the width it can (to the edge of

   #container

   ); and
   
2. Push

   margin-left

   on

   #footer

   151px so it isn't underneath the

   #navigation

   , but underneath

   #content

   ?

See how that works for you :)