Footer is not centered. Floats right or left.
-
the width of my wordpress theme body is lower than 100 % but the footer is
of 100% of width. I edited the footer size in the style.css to 65% which match the content of my website.
But, the problem is, I can not align my footer in center with the website content. It either floats right or left. I have tried editing float in style.css (float: none) but no luck. By default, it is float: leftThe code for the footer in my default style.css is:
#wrapper, .footer-inner { font-size: 0.6875em; margin: 0px auto; padding: 0px; width: expression((document.body.clientWidth > 981)? "980px" : "auto"); max-width: 980px; } #footer { float: left; font-size: 0.6875em; max-width: 100%; width: 100%; padding-top: 60px; padding-bottom: 30px; border-top: 0.85em solid #eee; background: #2C2C2C; /* Old browsers */ background: -moz-linear-gradient(top, #2C2C2C 10%, #212121 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#2C2C2C), color-stop(100%,#212121)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #2C2C2C 10%,#212121 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #2C2C2C 10%,#212121 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #2C2C2C 10%,#212121 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2C2C2C', endColorstr='#212121',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #2C2C2C 10%,#212121 100%); /* W3C */ }
There are also some other styles involving inner elements of the footer so, I am not mentioning those.
The fode for footer.php is:
<?php do_action( 'bp_after_content' ) ?> </div> </div> <?php do_action( 'bp_after_container' ) ?> </div><!-- end wrapper --> <?php do_action( 'bp_before_footer' ) ?> <div id="footer"> <div class="footer-inner"> <div class="footer-inner-class"> <div class="fbox"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __('footer-left',TEMPLATE_DOMAIN) ) ) : ?> <div id="text1" class="widget widget_text"> <h2 class="widgettitle"><?php _e( 'Footer Left Widget', TEMPLATE_DOMAIN) ?> </h2> <div class="textwidget"> <?php _e( 'Please log in and add widgets to this footer.', TEMPLATE_DOMAIN) ?> <a>/wp-admin/widgets.php?s=&show=&sidebar=sidebar-5"><?php _e( 'Add Widgets', TEMPLATE_DOMAIN) ?></a> </div> </div> <?php endif; ?> </div> <div class="fbox"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __('footer-center', TEMPLATE_DOMAIN) ) ) : ?> <div id="text2" class="widget widget_text"> <h2 class="widgettitle"><?php _e( 'Footer Center Widget', TEMPLATE_DOMAIN) ?> </h2> <div class="textwidget"> <?php _e( 'Please log in and add widgets to this footer.', TEMPLATE_DOMAIN) ?> <a>/wp-admin/widgets.php?s=&show=&sidebar=sidebar-6"><?php _e( 'Add Widgets', TEMPLATE_DOMAIN) ?></a> </div> </div> <?php endif; ?> </div> <div class="fbox"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar( __('footer-right', TEMPLATE_DOMAIN) ) ) : ?> <div id="text3" class="widget widget_text"> <h2 class="widgettitle"><?php _e( 'Footer Right Widget', TEMPLATE_DOMAIN) ?> </h2> <div class="textwidget"> <?php _e( 'Please log in and add widgets to this footer.', TEMPLATE_DOMAIN) ?> <a>/wp-admin/widgets.php?s=&show=&sidebar=sidebar-7"><?php _e( 'Add Widgets', TEMPLATE_DOMAIN ) ?></a> </div> </div> <?php endif; ?> </div> </div> <div id="footer-cb" class="footer-inner-class"> <div class="alignleft">©<?php echo gmdate('Y'); ?> <a>" href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a> <?php echo wp_network_footer(); ?><?php do_action( 'bp_footer' ) ?> </div> <div class="alignright"><?php _e('Provided by', TEMPLATE_DOMAIN); ?> <a href="http://premium.wpmudev.org" title="WordPress plugins, themes and support"><?php _e("WPMU DEV - The WordPress Experts",TEMPLATE_DOMAIN); ?></a> | <a href="#top-header"><?php _e('Go back to top ↑', TEMPLATE_DOMAIN); ?></a></div> </div> <?php do_action( 'bp_after_footer' ) ?> </div> </div> <?php wp_footer(); ?> <!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> </body> </html>
The website is still under development, so, I did not publish a link here but imagine a narrow website with wider footer.
If you get any idea how can I shorten the footer width while keeping the center alignment, please inform me.
Thanks
-
Do you want the footer centred or the footer inner ?
I want the whole footer block to be centered, not the footer inner.
see this site under development to know what I am talking about:
http://testblog.bdwebsites.com/
Navigate to the footer area.Remove your
float: left;
styles in the footer, or override it tofloat: none;
Tried removing float and float: none; both but no result. Even used
float: none !important; till no use.Clear your browser cache.
Thanks for your replies Andrew. I have 4 browsers running all the time using different cache and history. Also, I deleted entire history in firefox every time I refreshed the page. So browser cache is not the problem.
Besides, I think you have to add a new code here or assign a custom function to get the footer in the center position.
Removing float: left will not work here because I do all my editing in the child theme. And also, there is no code included in the style sheet that tells the browser to center the footer. So I think I need an universal or custom code or function to make the footer get aligned in the center position.
Thank you Andrew once again. I finally was able to solve this. You were right. All I had to do is to remove my float: left since override to float: none did not work.
The problem was, I tried to solve this within the child theme without touching the main theme. But I had no other option than to remove float: left from my main theme style.css
Also I added these additional codes for safety, to ensure center position:
margin-left: auto
margin-right: autoHave a nice day
- The topic ‘Footer is not centered. Floats right or left.’ is closed to new replies.