CSS in ui.core causes bad layout?

CSS in ui.core causes bad layout?


I have run into trouble when put jQuery.UI tabs into a div, which
resides in another div containing floated column. The unordered list,
which contains the tabs, receives height which is equal to the height
of the floated column.
Here's an example of this problem (HTML and jQuery):
http://www.speedyshare.com/156947422.html
http://rapidshare.com/files/211003861/tryme.zip.html
http://storeandserve.com/download/856579/tryme.zip.html
(any of the archives, 120KB)
Trying to figure this, I found that these line in ui.core.css cause
the problem:
.ui-helper-clearfix:after { content: "."; display: block; height: 0;
clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
Particularly, the "clear:both" in ":after". How do I fix this, while
leaving automatic height and full width of the tab bar?