When you show and hide a div, will it re-adjust surrounding elements automagically?

Question

When you show and hide a div, will it re-adjust surrounding elements automagically?

Sort of how google maps http://maps.google.com/maps?hl=en&tab=wl has that little icon where you can show/hide the left pane.

Is it just making it visible with a animation effect or its more elaborate than that?

Answer 1

Depends if it is relative or absolute positioned. And in the Google example, it is more complex, but not so complex, the controls on the right of the panel are moved once the animation has finished.

Answer 2

In terms of re-adjusting, if you are using CSS then it depends on weather or not you use the display:none option or visibility:hidden tag.

Visibility will hide it but not effect the surrounding elements, display on the other hand will...

Check out this bit of code that should highlight this...

<div style="border: solid 2px black;">
    <div style="visibility: hidden;">
        Hello
        <br />    
    </div>
</div>

<br />

<div style="border: solid 2px black;">
    <div style="display: none;">
        Hello
        <br />    
    </div>
</div>

Hope it helps! :)

Answer 3

Any elements that are taken in/out of normal flow (default positioning) will cause the rest of the page to readjust accordingly. However, there are ways to remove elements from normal flow.

position: absolute or position: relative will remove an element from normal flow. Using those, other elements will behave as if the positioned elements aren't there (unless they're also using positioning rules).

To hide/show a div:

display: none
will remove an element from normal flow

visibility: hidden
will hide the element, but keep its dimensions in normal flow