WordPress.org

Ready to get started?Download WordPress

Forums

Footer is not centered. Floats right or left. (8 posts)

  1. adnan0777
    Member
    Posted 1 year ago #

    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: left

    The 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

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Do you want the footer centred or the footer inner ?

  3. adnan0777
    Member
    Posted 1 year ago #

    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.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Remove your float: left; styles in the footer, or override it to float: none;

  5. adnan0777
    Member
    Posted 1 year ago #

    Tried removing float and float: none; both but no result. Even used
    float: none !important; till no use.

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Clear your browser cache.

  7. adnan0777
    Member
    Posted 1 year ago #

    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.

  8. adnan0777
    Member
    Posted 1 year ago #

    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: auto

    Have a nice day

Topic Closed

This topic has been closed to new replies.

About this Topic