how do i modify the footer so it extends width of monitor

Second time posting this question.  First time, I had some responses but then we changed the site design a bit.  

All I want to do is have the teal bar extends across the browser like the top teal bar.  I tried repositioning the footer div but it just seems to mess things up more.  

http://nsitedesigns.com/nsitedesigns/engaged/index.html
http://nsitedesigns.com/nsitedesigns/engaged/engaged.css

/* ~~ The footer ~~ */
.footer {
	padding: 10px 0 0 0;
	position: relative;
	clear: both; 
	background-image:url(img/footer_stripe.gif);
	background-repeat:repeat-x;
	font-size:.9em;
}

.footer p{
	color:#fff;
	margin:0px;
	padding:0px;}

Open in new window

nsitedesignsAsked:
Who is Participating?
 
HagayMandelCommented:
This is from your css file:\

.html {  /* needed for footer bar to extend across the page */
margin:0p;}

it should be:

html { //WITHOUT THE DOT
	margin: 0px;  //px or no units at all instead of p
}

Open in new window


and to force it all over, add it to the body tag as well.
body {
	margin: 0px;
}

Open in new window


You should remove margin-bottom: 50px; from the body tag, it makes no sense.
0
 
COBOLdinosaurCommented:
That is going to involve some re-structuring.  You have the footer inside of content which has a fixed width of 950px.  The whole footer needs to be outside of content with a width of 100%, or content needs to be width:100%, but I think that will screw up other parts of the page.

Cd&
0
 
HagayMandelCommented:
Take the whole footer div out of the container div, and place it just before the closing body tag (</body>).
AND, add margin:0: to the html css!!
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
nsitedesignsAuthor Commented:
HagayMandel,

Did you mean I need to add the following the css?

.html {
margin:0p;}
0
 
HagayMandelCommented:
Yes.
0
 
nsitedesignsAuthor Commented:
Well, it extended it more but it is not out to the edges.  I added padding:0 thinking that might be the ticket but that didn't really do anything.

http://nsitedesigns.com/nsitedesigns/engaged/clients.html
0
 
nsitedesignsAuthor Commented:
The extra "p" was a mistake.  I removed the . in front of the html and added a margin to the body tag.  Worked like a charm  Beeauttiful!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.