Footer Help

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hi everyone,

I need some help with my footer CSS. I have been experimenting with some sticky footer code for my site. This is the basic HTML

<div class="footer"><p>Footer Content</p></div>

And then my CSS:

.footer { height: 60px; margin: 0 auto; color: #fff; clear: both; padding: 2em 2em; background: #666; position: relative; top: 30px; }

The footer works fine and sticks to the bottom of my page, but I have one problem. I want the footer to occupy the full width of the window (ie no white space on the left and right). I'm pretty sure there's some CSS that can help me. Anyone here know how?

Visit my test page and scroll down to see what I'm talking about.

Photo of Brandon


  • 243 Posts
  • 33 Reply Likes
  • confused

Posted 9 years ago

  • 1
Photo of Philip Taylor

Philip Taylor

  • 355 Posts
  • 66 Reply Likes
Just add width:100%; (or 800px or whatever) and text-align:center; to your footer styling.
Photo of Brandon


  • 243 Posts
  • 33 Reply Likes
I have tried that already, it doesn't work, but thanks.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Brandon,

I tried a lot of different CSS with Chrome Developer Tools, and I am afraid it might not be possible due to all of the container/parent div's. There is the #content, #I99_html, and about 5 other div's surrounding your HTML. #content has a set width and a lot of the other parent div's have a set width too. Here's a screenshot:

Have you tried positioning it absolute to the bottom of the page? (that probably won't work though, because it won't be the actual bottom of the page, only the bottom of the viewport of the browser.)

Maybe someone else here on the Yola Forum will have a solution to this.

Photo of Brandon


  • 243 Posts
  • 33 Reply Likes
Thanks for taking a look Nathan. Yeah that's what I feared. I managed to get the footer to the width I wanted, but then in the browser I end up just getting a horizontal scroll. I tried using overflow-y:hide; but it didn't do anything.

I guess I'll have to just stick to a plain, simple footer then!
Photo of David


  • 465 Posts
  • 94 Reply Likes
Take a look at this Brandon, it may help you
Photo of Sanja


  • 10698 Posts
  • 495 Reply Likes
Hi Brandon,

I'm not sure which method you're using to add the code to your site (e.g. HTML Widget, Site CSS). One other possibility to try is to use the code in the Site tracking code area in the footer area (Site > Site Setting > Site Tracking Code). This might allow for the elongation that you're seeking. This is only available to Yola Silver users though!