[jQuery] jQuery dynamic image replacement in a <div> overlays later content in the page - help needed

[jQuery] jQuery dynamic image replacement in a <div> overlays later content in the page - help needed


Hi there,
I have a page (http://anf.ucsd.edu/spevents/2008/255/b/) that has a
series of tabs. If you click on the 'Waveforms' tab you will see a
list of three plots to select from. Before clicking on any of the plot
links, notice that the content after the waveform image (starting with
the title 'Further information'). This is displayed directly beneath
the plot. Lets call this content 'next'
Now, clicking on one of the plot links causes the image and title to
be replaced. However, when the image is larger than the original image
height, it displays over content 'next'. The behavior I am looking for
is that when the image that gets switched in is larger than the
original image, the content 'next' does not get overwritten. Instead
it gets pushed down the page, so it is beneath the image.
I feel like this should be a simple CSS display or height property for
the div that the image lies in, but I can't seem to figure out what.
Basically I want the behavior to replicate the UI tabs behavior - when
the tab section is large you don't see it overwrite 'next' in the
page. I have picked apart the UI-tabs source but not seen where this
is set.
All help appreciated. Thanks in advance.