Display Widgets Horizontally in Area

1 Views

I am building a custom bootstrap 3 theme. I have created a new widget area for my header and am trying to get the widgets there to display horizontally, in line. I’ve looked up several tutorials, but none seem to be working. Can anyone help? 

**Here is my CSS for the list:**

#top-widget-container ul { 
list-style-type: none; 
}

#top-widget-container ul li {
display: inline;
}

**And my functions.php widget insert**

add_action( 'widgets_init', 'add_header_widget' );
function add_header_widget() {

    register_sidebar( array(
        'name' => 'Header Widget Area',
        'id' => 'header_widget',
        'before_widget' => '<li id="top-widget-container ul li">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="rounded">',
        'after_title' => '</h2>',
    ) );
}
Post Views: 1

Related posts

1 comment

  1. You’re looking for either float or inline-block. For a variety of reasons, I prefer inline-block:

    #top-widget-container ul > li {
    display: inline-block;
    /* Next two lines make IE7 behave */
    zoom: 1;
    *display: inline;
    /* Adjust width to the appropriate size for your theme */
    width: 250px;
    /* Presumably you want all the widgets to align-top */
    vertical-align: top;
}

    Notice that I’ve used the “direct descendant” selector (aka child combinator selector or immediate child): ul > li – that way, any sub-lists don’t get this same formatting (which could cause all sorts of challenges). This selector is supported in modern browsers, IE8+, and IE7 (usually).

    Alternatively, the float technique (don’t like it as well, but will work):

    #top-widget-container ul { 
    list-style-type: none; 
    /* Next two lines ensure the container clears the floats */
    width: 100%;
    overflow: hidden;
}

#top-widget-container ul > li {
    display: block;
    /* Adjust width to the appropriate size for your theme */
    width: 250px;
}

Comments are closed.