WordPress.org

Forums

[resolved] 2011 Theme, CSS style for four widget areas in footer (3 posts)

  1. foodboy
    Member
    Posted 2 years ago #

    Hello!

    I have a CSS issue!

    I am using a child theme overriding twenty eleven theme. I have registered a new widget in my child theme functions.php

    register_sidebar( array(
        'name' => __( 'Footer Area Four', '<child theme name>' ),
        'id' => 'sidebar-6-custom',
        'description' => __( 'custom-footer-area-six', '<child theme name>' ),
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

    I have then added the below code to add the widget to the footer inside sidebar-footer.php

    <?php if ( is_active_sidebar( 'sidebar-6-custom' ) ) : ?>
    	<div id="<strong>forth-custom</strong>" class="widget-area"
    role="complementary">
    		<?php dynamic_sidebar( '<strong>sidebar-6-custom</strong>' ); ?>
    	</div><!-- #forth-custom .widget-area -->
    	<?php endif; ?>

    I have used forth-custom for the div

    The above code works ok. However, When I add 4 widgets to the footer 3 are displayed and the forth is displayed on the next line under the first widget.

    How can I style the widgets so I can have all 4 in a line across the footer? My CSS is not the best and I appreciate that a link to the site would be more useful, unfortunately I am working on localhost. Hope someone can help? The Footer CSS for the #supplementary div is below! Thanks in advance!

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

    #colophon {
    	clear: both;
    }
    #supplementary {
    	border-top: 1px solid #ddd;
    	padding: 1.625em 7.6%;
    	overflow: hidden;
    }
    
    /* Two Footer Widget Areas */
    #supplementary.two .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 48.1%;
    }
    #supplementary.two .widget-area + .widget-area {
    	margin-right: 0;
    }
    
    /* Three Footer Widget Areas */
    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 30.85%;
    }
    #supplementary.three .widget-area + .widget-area + .widget-area {
    	margin-right: 0;
    }
  2. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Without seeing the site, hard to say for sure, but it looks like it may be just that the total widths of the widgets and their margins are more than 100% - hence the last one drops down. Try reducing the width and/or the margin in the below code and see if that fixes it:

    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 30.85%;
    }

    Hopefully you are using Firebug to work with the CSS on this? If not, definitely the best way to go.

  3. foodboy
    Member
    Posted 2 years ago #

    Hi WPyogi, thank you so much, it worked!!

    I amended the width to the following:

    #supplementary.three .widget-area {
    	float: left;
    	margin-right: 3.7%;
    	width: 22.85%;
    }

    Thanks again

Topic Closed

This topic has been closed to new replies.

About this Topic