Проблемы позиционирования DIV и изображения в JQuery UI Tabs плагин

Question

Я скачал Jquery UI Tabs виджет от

http://jqueryui.com/tabs/

И все отлично работает, когда я использую следующий код:

<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 для red_div:

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

Но когда я добавить атрибут выравнивания для изображения, как

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

или когда я добавить атрибут поплавка для ДИВ # red_div

#red_div { 
    ... 
    float: left; 
} 

У меня есть проблемы с позиционированием. Они не на месте, они должны быть. Они пересекают нижнюю линию. Картины будут описывать это лучше.

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

Как я могу избавиться от этой проблемы, если мне действительно нужно использовать поплавок для DIV и выравнивания для изображения? Благодарю.

UPDATE: Я отправил эту проблему на JSFiddle: http://jsfiddle.net/q6F7r/

Answer 1

Попробуйте добавить поплавок (и ширину) в "основной DIV".

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

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