Question

I recently applied the answer supplied for the question “How can I get a <ul> to be evenly spaced across the content area it exists in?“, to my list of tabs.

This worked fine for me, but any elements after the list of tabs appeared to the right of the <ul/> element, instead of under it. I applied a clear: both; rule to the CSS for my <ul/> and that solved the problem in FireFox. Now elements were appearing under the list, as I expected… except it doesn’t work in Internet Explorer 8.

This is the CSS for the <ul/>:

#SearchForm ul {
    width: 100%;
    list-style: none;
    padding:0;
    margin: 0 0 5px 0;
    clear: both; 
}

However, if I change the width rule to width: 101%;, this makes everything appear correctly in IE8 and Firefox. Why wouldn’t this work in IE8? Setting something to 101% width seems a bit hacky. Is there a better way for me to ensure that all elements appear under the <ul/> in all browsers?

Answer 1

As Yi Jiang suggested, applying clear: both to the element after your #SearchForm ul will fix the problem:

<div id="SearchForm">
</div>
<div id="someOtherElement" style="clear: both">
</div>

The reason it doesn’t work as expected when you apply clear to #SearchForm ul is because this only tells the <ul> to clear floats, not the elements after the <ul>. Here’s an updated example showing it in action.