Display Widgets Horizontally in Area [closed]

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;
}