Full width footer

Posted on 2012-04-04
Last Modified: 2012-08-14
I am trying to change my twenty eleven (child theme) footer to be full width in the browser, I moved my </div><!-- #page --> above <footer id="colophon" role="contentinfo"> in my footer.php and ensured that #colophon width is set to 100% in the css, body padding is 0, but footer will not expand, this is a child theme, any ideas?
Question by:AngryHermit
  • 3
  • 3
LVL 30

Expert Comment

ID: 37807755
Can you post a live URL? Are you sure there are no other divs that the footer is sitting inside of?

Author Comment

ID: 37807810
not that i can find, is the site, when i inspect it shows up under body, but no div is labeled body. <---- this is basically what ive done
LVL 30

Assisted Solution

LZ1 earned 500 total points
ID: 37807823
I see. On line 73 of your style.css your body has a max-width of 85em.  You'll have to remove that in order to get the full width of the page/window
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!


Author Comment

ID: 37807886
That would do it. Any suggestions for centering body that still allows for the footer to expand both ways?
LVL 30

Accepted Solution

LZ1 earned 500 total points
ID: 37807900
You really wouldn't want to center the body. Instead use the #page id and add margin:0 auto.  That should do it. Just make sure to keep the footer outside of it like it is now.

Author Closing Comment

ID: 37807909
Life saver! Ive been messing back and forth but never the right combination, learned a lot on this one. Thank you!

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
spacing 5 32
Summernote and form validation 10 46
url rewrites not working in codeigniter 2 13
php ssh2_scp_send 1 6
This article discusses four methods for overlaying images in a container on a web page
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now