clear div clearing the page to the end in jquery ui tabs...

Question

I have set up a list using this css...

  #navlist li
{
list-style-type: none;
padding: 7px;
float: left;
}

I have shown the page using jquery ui with other div containers... the page here

the loaded page in tabs being 'friend.jsp?all=true'

Im using a clearing div...

.clear {
clear:left;
overflow:hidden;
height:1px;
}

Now when i use a clearing div i get the page like this... the clearing div is clearing up to the end of the page...

but on the 1st tab, that is on the freinds tab,
when i m not using a clearing div i get the tab pane with no height...

Any help with setting up a css for ui tabs

or with setting up the list without float:left

thanks
Pradyut