Arranging hidden elements using CSS

Question

OK, this is what I need :

• I've got a horizontal container (let's call that C), containing 2 elements (A,B)
• Of these two elements, only one has to be visible at any time. So, the other's visibility property is set to hidden .
• Let's say these elements are placed with this exact sequence : |<----------- AB ->| , and thus right-aligned.
• When element B is active, everything is OK.
• When element A is active (and thus B is invisible), the A element doesn't float to the right side and remains where it is : |<----------- A --->|

The question :

• How can I "push" element A to the right ("above" element B), so that it is like it's floating right/

Answer 1

Use display:none; instead of visibility:hidden; as visibility:hidden; will hide the element but still occupy the space

Answer 2

Visibility: hidden will prevent the element from being rendered, but it will still take up space.

Display: none will prevent the element from being rendered AND from affecting the layout.