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>',
    ) );

closed as off-topic by gmazzap, kaiser, brasofilo, s_ha_dum, Johannes Pille Sep 21 '13 at 7:33

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions should be specific to WordPress within defined scope (merely happening in its context, such as generic PHP/JS/HTML/CSS, is insufficient). Might be better asked at Stack Overflow or other appropriate site of Stack Exchange network." – gmazzap, kaiser, brasofilo, s_ha_dum, Johannes Pille
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    Please keep in mind that this is no Bootstrap or CSS related site. – kaiser Sep 20 '13 at 23:29

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;
  • Okay, with a minor tweak I was able to get it working. For some reason when the ul is after the class it doesn't work. I had to do ul#id and ul#id li. Thanks for the lesson on the ul > li. I didn't know that and I'm sure this will help me out alot! – streetfire Sep 21 '13 at 0:48

Not the answer you're looking for? Browse other questions tagged or ask your own question.