View Full Version : Ajax tab structure shifting vertically

08-10-2007, 04:45 AM
1) Script Title: Ajax Tabs Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

3) Describe problem:

I have a question regarding the vertical alignment of "Multiple Ajax Tabs Contents on the same page" as described at the bottom of the above URL.
On that page an example is given of a tab strucuture(meaning the entire 5-tab layout of: Introduction, bird, dog, cat, sea otter structure).

Let's say I have 2 tab structures, which are at the an equal vertical position but horizontally separated and positioned one at the left(structure 1) and the other(structure 2) at the right side of a web page. Is it possible to force both tab structure to always stay on top, regardless of which individual tab is clicked in either structure. With the current code it seems that if individual tabs contain a lot of content relative to other individual tabs in either structure, clicking on the tabs with little content would cause the whole tab structure to move vertically down the page. This leaves a lot of white space and requires significant down-scrolling to locate the tab structure again.

So, I was wondering if there is a way to force both tab structures to always stay on top, even if a tab with small amount of content is clicked on.


08-10-2007, 06:40 AM
Looks like a previous problem someone else posted a while ago: http://www.dynamicdrive.com/forums/showthread.php?t=21878

08-10-2007, 10:04 AM
I've tried the suggested solution but it only seems to work if there is one tab structure on a webpage. I have 2 parallel structures that I am trying to align vertically regardless of which individual tab is clicked. If a 'large content' tab (within strucuture 1, let's say) is clicked (and structure 2 doesn't have a tab with an equally large content), then structure 2 gets pulled significantly down, with a large white space above and below it. :confused:

Thanks in advance.

08-11-2007, 06:58 AM
Do you have a link to the problem page? It'd definitely be easier with a visual in front of me of the problem.

08-12-2007, 01:23 AM
okay, hopefully the following example site below is a little clearer. Clicking on the tab structure on the left(for instance the 'contact' tab) causes the tab structure on the right to move down significantly.

So my question is whether it is possible to keep both structures on the top, to not move down, regardless of which tab is clicked(on either structure).



08-12-2007, 08:46 PM
Ok, it looks like your problem is actually just a layout issue with your table cells containing the two Tab Contents. Inside both td tags containing the two contents, you need to add a "valign" attribute:

<td align="center" valign="top">