How to make elements appear under a <UL> in Firefox & IE8?

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 elem开发者_运维百科ents 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?

---

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.