Relative positioning, but extra blank space.

[50YearOldFart]

Hi. I have a little job application form set up. It has sections of the form in divs' overlapping each other with relative position, with little tabs to flip through them. (setting visibilities). (Purpose of this is to save space, look nice, and be able to enter multiple phone numbers in a space-saving way, etc.) It works great, but the page still remains as long as it would be without the relative positioning... so basically I got 2000px of white space under all the content. Is there anyway to get around this? I tried searching the forums here, and googling it, but had no luck. Thanks.

Here's an image to help you visualize what I'm doing.

[CSSNINJA]

Try having the tab sections as menus, then use display:block and display:none for the content areas using absolute positioning.

[ctoz]

You could get rid of the scrollbar with html {overflow:hidden } and put some color on the background, as a band-aid.

Using relative positioning is what's giving you the whitespace. Absolute positioning is the way to go: z-index them and a bit of javascript to show/hide them

[Centauri]

This is a common misunderstanding of relative positioning - the element itself is not moved to a different place, it is only DISPLAYED in a different place, but still actually occupies it original location. If you want to overlap items without using absolute positioning, then negative margins will move the actual element.