Hello, I'm having trouble with jQuery.UI tabs. I use one-column liquid layout, that is: in a "Main" div there is "Floated" column and in the content area there is "MainContent" with margin equal to the width of the column. When I place tabs in the content area, the height of its <ul> part (which makes up the tabs themselves) for some reason becomes equal to the height of the floated column. I see this in Firefox and Opera, but not in IE.

I will post HTML file here, but not the jQuery.UI part. Full primer of the problem can be found in the attached archive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<link type="text/css" href="js/theme/ui.all.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>

<style type="text/css">
  margin: 0px;
  font-size: 12px;
  font-family: Verdana, Tahoma, Arial;

  width: 600px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #666666;

  float: left;
  width: 300px;
  height: 400px;
  border: 2px dashed #0000FF;
  background-color: #BBBBBB;

  margin-left: 330px;
  background-color: #99AA99;
  height: 500px;

<script type="text/javascript">
    $(document).ready(function() {

  <div id="Main">
    <div id="Floated">
        <p>Floated content here</p>

    <div id="MainContent">
      <div id="Tabs">
          <li><a href="#tabs-1">Tab 1</a></li>
          <li><a href="#tabs-2">Tab 2</a></li>
          <li><a href="#tabs-3">Tab 3</a></li>

        <div id="tabs-1">
          <p>Tab #1</p>

        <div id="tabs-2">
          <p>Tab #2</p>

        <div id="tabs-3">
          <p>Tab #3</p>

Hope for your help.

It has something to do with the way jQuery's CSS puts height of that list. They use ":after" pseudo-selector and "clear" property.

.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; width: 98%; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
/*.ui-helper-clearfix { display:block; }*/
/* end clearfix */

Well, the problem is localized, but I can get it to work properly.

0px is an invalid style. Never attach a unit of measure to a 0 value. It invalidates the entire style.