Balance Theme Footer Not Stretching

[sookie]

Hi Guys,

The Balance theme footer widget is not stretching to match the featured home.

Am not sure what I have done wrong. I have been at it for a day now.

Thanks

http://www.ianhowlett.com/

[Matt Mizwicki]

It looks like your site http://www.ianhowlett.com/ is password protected. Can you remove the password so we can take a look?

[sookie]

Sorry guys about that. I have now removed the password.

Thanks

[Matt Mizwicki]

Hi again Sookie.

So the problem is that your footer is inside the "inner" div. It needs to be outside the inner div otherwise it can't go to the full 100% width.

This is how your site has it...

<div id="inner">
         <!-- more inner div content is here-->
     <div id="footer" class="footer">
         <!-- all footer content is here-->
     </div> <!-- this is closing the footer div -->
</div> <!-- this is closing the inner div -->

So the footer is inside the inner div.

It needs to be like this for the footer to be full width....

<div id="inner">
         <!-- more inner div content is here-->
</div> <!-- this is closing the inner div -->
<div id="footer" class="footer">
         <!-- all footer content is here-->
</div> <!-- this is closing the footer div -->

Now the footer is outside of the inner div and should go full width.

I can't be sure what changed in your code, so you'll have to do a little searching.

Maybe there is an open div tag that didn't get closed?

Possibly you modified your code and used a hook that moved the footer? If so, you'll need to change your hook, because the one being used isn't correct. (If you're not sure what a hook is, then that's not the problem and you can ignore that part.)

[sookie]

Thanks for helping Matt. I can't seem to find the code above in my styles sheet. I have looked for it.

Are you talking about this:

#inner {
margin: 40px auto 0;
overflow: hidden;
width: 960px;
}

.balance-landing #inner {
margin: 20px auto 0;
}

Here is my footer widget:

/* Footer Widgets
------------------------------------------------------------ */

#footer-widgets {
background: url(images/gray-texture.jpg);
clear: both;
margin: 0 0 20px;
padding: 25px 0;
overflow: hidden;
}

#footer-widgets .wrap {
font-size: 13px;
overflow: hidden;
margin: 0 auto;
padding: 0;
width: 960px;
}

#footer-widgets .widget {
background: none;
border: none;
margin: 0 0 20px;
padding: 0;
text-shadow: #fff 1px 1px;
}

#footer-widgets .widget,
#footer-widgets .widget p {
color: #777;
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 13px;
}

#footer-widgets .widget p {
margin: 0 0 15px;
}

#footer-widgets ul {
margin: 0;
}

#footer-widgets #wp-calendar thead,
#footer-widgets #wp-calendar td {
background: none;
}

.footer-widgets-1 {
float: left;
margin: 0 40px 0 0;
width: 295px;
}

.footer-widgets-2 {
float: left;
width: 290px;
}

.footer-widgets-3 {
float: right;
width: 295px;
}

/* Footer
------------------------------------------------------------ */

#footer {
clear: both;
color: #888;
font-family: Arial, Tahoma, sans-serif;
font-size: 13px;
overflow: hidden;
padding: 20px 0;
text-transform: uppercase;
}

#footer p {
color: #888;
font-family: Arial, Tahoma, sans-serif;
font-size: 13px;
}

#footer .gototop {
display:none;
}

#footer .creds {
display:none;
}

[Matt Mizwicki]

Sookie,
Looking into it more, i def think it has to do with one of your div's in your html not being properly closed. I think maybe it's in your sidebar widgets.

Notice the footer is working correctly on your contact page (which doesn't have a sidebar)...
http://www.ianhowlett.com/contact/

But the footer isn't working on any page with a sidebar.

I'd move all of your widgets out of your sidebar and see if that fixes the problem. If it does, add the widgets back one at a time until the problem shows up again. Then you'll know which widget is causing the problem, and you can investigate it further.

[sookie]

Thank you, thank you. You are heaven sent. It was one of the widgets with custom HTML causing problems.

[Matt Mizwicki]

Whooohooooo! Glad i could help 🙂

[Author]

Posts