asked on

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

COBOLdinosaur

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&

SOLUTION

Hagay Mandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nsitedesigns

ASKER

HagayMandel,

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

.html {
margin:0p;}

Hagay Mandel

Yes.

nsitedesigns

ASKER

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

ASKER CERTIFIED SOLUTION

Hagay Mandel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nsitedesigns

ASKER

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!