Question

I wanted to use “full width” stripe on my footer, but aparently it doesen’t want to work. here is the example of what I have right now.:

I want the footer to do a repeat-x over its div. So, going off until the end of the screen (like its done on the upper part). This might be something extremely simple, but I’m fairly inexperienced with CSS styles, so please lend me a hand.

[EDIT] The footer div is inside a wrapper. The edges of the div are aligned with the wrapper width. My question is if its possible for it to “overlap” the limitations, until the end of the screen.

I would also like to give it a specific position, not variable with the end of the article. I understand that I need to use it as position:absolute, but it always apears right after the header, even if I give it a Y position. There is probably something simple I’m forgetting.

Here is the existent code I have in my Footer class:

#footer {
    background:url(wp-content/uploads/2012/06/whitestripe.png) repeat-x;
    position:relative;
    width:100%;
    clear:both;
    text-align:center;
    line-height:16px;
    font-size:11px;
}
#footer a {
    padding:2px 3px;
    color:#004a6a;
    text-decoration:none;
}
#footer a:hover {
    color:#105a7a;
}

Thank you.
Marco Roberto.

Answer 1

Move the footer element outside the main wrapper so that it isn’t constrained by it. Inside the body will do fine for example.

Then change the css:

#footer {
  position: absolute; // or fixed if you want it to scroll along
  left: 0;
  right: 0; // or width: 100%
  bottom: 10px; // change to the value you want
}