Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Arranging hidden elements using CSS

Arranging hidden elements using CSS

Problem

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 : ||, 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 : ||

The question :

  • How can I "push" element A to the right ("above" element B), so that it is like it's floating right/
Problem courtesy of: Dr.Kameleon

Solution

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

Solution courtesy of: freebird

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Arranging hidden elements using CSS

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×