Solved

Full width footer

Posted on 2012-04-04
6
481 Views
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?
0
Comment
Question by:AngryHermit
  • 3
  • 3
6 Comments
 
LVL 30

Expert Comment

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

Author Comment

by:AngryHermit
ID: 37807810
not that i can find, carlosparra.com/ryans is the site, when i inspect it shows up under body, but no div is labeled body.
http://wordpress.org/support/topic/full-width-footer-twentyeleven-child <---- this is basically what ive done
0
 
LVL 30

Assisted Solution

by:LZ1
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
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

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

Accepted Solution

by:
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.
0
 

Author Closing Comment

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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
what is best version of php to use 6 46
Whether to use true/false, yes/no or 0/1 11 51
WordPress TK Title 8 24
remove background quote mark from widget 6 18
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

912 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

19 Experts available now in Live!

Get 1:1 Help Now