align footer container content with page width

  • Resolved astephens

    (@astephens)


    10 years, 3 months ago

    I am trying to align the content in the footer with the page width. I need the background gradient repeat to be full width but keep the footer content aligned. I placed the footer div (containing the gradient) outside the page wrap close so the gradient wouldn’t be contained and limited within the 1000 px width however i need to get the footer container content in line with the 1000px page width. I had it right earlier but made some changes and can’t seem to get it right. I know i need some changes in the CSS or possibly HTML.
    Thanks…
    https://www.gracechurchhouston.com
    I am using a BLANK theme created from scratch using the WP CMS environment… done in a web design class.

Viewing 5 replies - 1 through 5 (of 5 total)

  • You just need a few minor tweaks.

    Change this:

    #footer-container {
   clear: both;
   position: absolute;
   width: 1000;
   height: 185px;
   margin-left: auto;
}

    to this:

    #footer-container {
   clear: both;
   position: relative;
   width: 1000px;
   height: 185px;
   margin-left: auto;
   margin-right: auto;
}

    That is, make position: relative, add px to the end of the width value, and add the margin-right: auto;.

    Let me know if this worked for you.

    Thanks,

    Richard

    Thread Starter astephens

    (@astephens)

    It did work! I knew it was probably something simple i was missing… like omitting “px” for one thing. Thank you so much for your quick reply. I do appreciate your help very much, Richard.

    welcome, Glad it worked!

    Wow, this is just like a company I used to work for. I do the work and someone else gets the credit. ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘align footer container content with page width’ is closed to new replies.