jQueryUI Accordion - overflowing parent <div> container
Somewhere along last week, my two accordions broke. I wished my company operated a cvs. but oh well.
I have my accordions set up as such:
- $('#left').accordion({ header: 'h3', fillSpace: true }); $('#right').accordion({ header: 'h3', fillSpace: true });
Here is the css for both accordions:
div#weapon div#left {
display: none;
clear: both;
float: left;
width: 47%;
height: 250px;
margin-bottom: 5px;
border: 2px solid red;
}
div#weapon div#right {
display: none;
clear: both;
float: right;
width: 47%;
border: 2px dashed purple;
}
So why is my accordions overflowing (like off the visual page - web site scrolls) the parent divs in vertical direction (div#right and div#left). Did I miss a "switch setting"???
here is the HTML:
<div id='right'>
<h3><a href="#" title="#">Performance</a></h3>
<div id='perfs'>
<p>In this container is where we will present to the user weapon performances such as operating temperatures, velocities, etc.</p>
</div>
<h3><a href="#" title="#">Containers</a></h3>
<div id='containers'>
<p>In this container, we will present to the user some of the particulars of how the item is packaged to include inner and outer packaging.</p>
</div>
<h3><a href="#" title="#">Transportation Data</a></h3>
<div id='transData'>
<p>This is where we will display transportation data to the user of such things as Hazard Class/Division, NSN, DODAC, DOTlabel, etc.</p>
</div>
<h3><a href="#" title="#">References</a></h3>
<div id='References'>
<p>This is where we will display item references such as publications or websites of specific interest</p>
</div>
Tony
It is not the job you get handed, but what you have done with it in the end that people remember.