unwanted space after positioned div on top of another div

Question

Hi, I'm having a problem adjusting the layout of my site.

I have 2 div tags, one has a welcome message and a picture. The other div is empty until the user enters information in a form, at which point I use jquery to hide the welcome message and display content relevant to the users data.

The problem is that the browser thinks it needs vertical space for both divs, even when they are stacked on top of each other, this results in a lot of empty space at the bottom of the page and a long unwanted scrollbar.

I'm using position: relative for both divs because it make the page look good on small screens and big screens that way.

I'm using left: and top: values to move the welcome div on top of the empty content div.

Thanks in advance for your help! Please let me know if you need more info. here's an example of my HTML sample_G is in front of browsable.

<div id="browsable" class="scrollable">
    <div id="graphs" class="items">
    </div>
</div>

<div id="sample_G">
    <p class="Welcome">Welcome to the graphing tool!</p>
    <img src="pics/Sample_graph.jpg" /> 
</div>

Answer 1

Just figured out a good answer... I'm going to leave this on here in case someone else has a similar problem.

Set the display of browsable to "none" until sample_G is hidden, then use jquery to 'show' browsable.

If anyone sees a problem with this or has a better answer please feel free to post.

Thanks!