By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,466 Members | 1,309 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,466 IT Pros & Developers. It's quick & easy.

collapsing space between hidden divs

P: n/a
Hello

I have 5 divs, and initially the lower 4 are hidden. I would like
everything beneath the 5th div to appear flush against the first
visible div. But right now, there is a gap of white space between the
first visible div, and everything beneath the 5th. Here is this code:

<form name="f">
<div id="Item0">Item 1:<input type="text" size="32" maxlength="32"
name="Name0" id="Name0"></div>
<div style="visibility:hidden" id="Item1">Item: 2<input
type="text" size="32" maxlength="32" name="Name1" id="Name1"></div>
<div style="visibility:hidden" id="Item2">Item: 3<input
type="text" size="32" maxlength="32" name="Name2" id="Name2"></div>
<div style="visibility:hidden" id="Item3">Item: 4<input
type="text" size="32" maxlength="32" name="Name3" id="Name3"></div>
<div style="visibility:hidden" id="Item4">Item: 5<input
type="text" size="32" maxlength="32" name="Name4" id="Name4"></div>
<input type="button" value="Add Another" onClick="add();"
name="AddAnother">
</form>

How can I make the "Add Another" button flush against the first
visible div (i.e. eliminate all the white space between the first div
and the button), and then write a function "add" that sequentially
unhides each of the other divs, moving the "Add Another" button down
as well?

Thanks for all your help, - Dave
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Dave,
Using visibility:hidden will allow a hidden div 'box' to occupy white space in
the html document; whereas, using display:none will render the box not visible
AND not occupy white space. Unless there's some special reason for it, I'd
recommend using display:block (to view) or display:none (to render invisible).
There's also display:inline which will allow visibility. As the attribute
values 'block' and 'inline' imply, they allow the element to exist on it's own
line (block) or on the same line as its preceding elements (inline).

Hope this helps,

Jim
Jul 23 '05 #2

P: n/a
Thanks! Go Sharks! -

sa***********@aol.com.nospam (SanJoseWebGuy) wrote in message news:<20***************************@mb-m20.aol.com>...
Dave,
Using visibility:hidden will allow a hidden div 'box' to occupy white space in
the html document; whereas, using display:none will render the box not visible
AND not occupy white space. Unless there's some special reason for it, I'd
recommend using display:block (to view) or display:none (to render invisible).
There's also display:inline which will allow visibility. As the attribute
values 'block' and 'inline' imply, they allow the element to exist on it's own
line (block) or on the same line as its preceding elements (inline).

Hope this helps,

Jim

Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.