Проблема с отображением виджета jQuery

Question

У меня возникли трудности с отображением виджета вкладки jQuery. В this Fiddle вы увидите два изображения. Если вы нажмете изображение Professional Advisers, появится виджет вкладки. Если вы нажмете виджет «Индустрия», отобразится модальный диалог jQuery.

Проблема заключается в том, как отображается виджет вкладки - он должен открываться аккуратно в области под изображениями, также как и модальный диалог. Я не уверен, что это проблема с CSS (я пробовал стилизовать элемент #tabs разными способами без успеха), или мне нужно перетасовать мои файлы (я попытался поместить #tabs div внутри профессиональных советников div безуспешно).

HTML

<a href="#" id="professional-advisers-image"> 
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional 
     advisers</div> 
</a> 
<a href="#" id="industry-image"> 
    <div class="circle hovershadow industry industry-box-shadow">Industry</div> 
</a> 

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Law firms</a> 
    </li> 
    <li><a href="#tabs-2">Accounting and audit firms</a> 
    </li> 
    <li><a href="#tabs-3">Management consultants and economists</a> 
    </li> 
    <li> 
     <button id="closeTabs">X</button> 
    </li> 
</ul> 
<div id="tabs-1"> 
    <p>Law firm text goes here</p> 
</div> 
<div id="tabs-2"> 
    <p>Accounting and audit firm text goes here</p> 
</div> 
<div id="tabs-3"> 
    <p>Management consultants and economists text goes here.</p> 
</div> 
</div> 
<div id="industry-dialog" class="dialog" title="Industry">Industry text goes here</div> 

Javascript

$("#tabs").tabs().hide(); 
$("#professional-advisers-image").click(function() { 
$("#tabs").toggle(); 
}); 

$("#closeTabs").click(function() { 
$("#tabs").hide(); 
}); 

$("#industry-dialog").dialog({ 
autoOpen: false 
}); 
$("#industry-image").click(function() { 
$("#industry-dialog").dialog("option", "modal", true); 
$("#industry-dialog").dialog("option", "height", "auto"); 
$("#industry-dialog").dialog("option", "width", 600); 
$("#industry-dialog").dialog("open"); 
}); 

CSS

.circle { 
width: 220px; 
height: 220px; 
border-radius: 50%; 
border: 2px solid #fff; 
float: left; 
display: inline-block; 
/* text styling for circles - see also the .text style below */ 
font-size: 35px; 
color: #FFF; 
line-height: 220px; 
text-align: center; 
font-family: Ubuntu, sans-serif; 
} 
#dialog #tabs { 
font-family:'Istok Web', sans-serif; 
font-size: 14px; 
line-height: 1.8em; 
} 
.advisers { 
background: #5E2750; 
margin-left: 28%; 
margin-right: 13%; 
} 
.advisers-box-shadow { 
box-shadow: 0px 0px 1px 1px #5E2750 
} 
.industry { 
background: #DD4814; 
} 
.industry-box-shadow { 
box-shadow: 0px 0px 1px 1px #DD4814 
} 
.hovershadow:hover { 
box-shadow: 0px 0px 4px 4px #AEA79F 
} 
.text { 
/* used by professional advisers circle */ 
line-height: 40px; 
padding-top: 70px; 
height: 150px 
} 

Answer 1

Попробуйте клиринговую DIV после ваших кругов :

http://jsfiddle.net/JWgRB/2/

<a href="#" id="professional-advisers-image"> 
    <div class="circle hovershadow advisers advisers-box-shadow text">Professional 
     advisers</div> 
</a> 
<a href="#" id="industry-image"> 
    <div class="circle hovershadow industry industry-box-shadow">Industry</div> 
</a> 

<div style="clear: both;"></div> 

<div id="tabs">