Problems in positioning div and image in Jquery UI Tabs Plugin

Question

I have downloaded Jquery UI Tabs Widget from

http://jqueryui.com/tabs/

And everything works perfect, when I use the next code:

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>
  <div id="tab1">
      <div id="red_div"></div>
  </div>
  <div id="tab2">
    <img src="img_path_here.jpg" />
    Image Test
  </div>
  <div id="tab3">
        Tab 3
  </div>
  <div id="tab4">
    Tab 4
  </div>
</div>
<script type="text/javascript">
            $(document).ready(function(){
                $(function() {
                  $( "#tabs" ).tabs();
                });
            });
</script>

CSS for red_div:

#red_div {
    width: 300px;
    height: 300px;
    background-color: red;
}

But when I add align attribute for the image, like

<img src="img_path_here.jpg" align="left" />

or when I add float attribute for div#red_div

#red_div {
    ...
    float: left;
}

I have problems with positioning. They are not in the place, they are supposed to be. They cross the bottom line. The pictures will describe this better.

http://i.stack.imgur.com/efFnK.jpg
http://i.stack.imgur.com/MLWJu.jpg

How can I get rid of this problem, if I really need to use float for div and align for image? Thanks.

UPDATE: I have posted this problem on JSFiddle: http://jsfiddle.net/q6F7r/

Answer 1

Try adding float (and width) to the "main div".

.ui-tabs {float:left; width:100%;}

http://jsfiddle.net/q6F7r/6/