CODEWITHSUNDEEP
cssvisibility
BruceyBandit
BruceyBandit

Reputation: 4324

What is the best css property to use for this situation

Imagine I have 3 lines of text for example like below:

Line 1: This is text 1

Line 2: This is text 2

Line 3: This is text 3

Now what I want to do is hide Line 2, but I want Line 3 to push up to the same position where Line 2 is, when Line 2 becomes visible then I want Line 2 to slot right back to where it was and Line 3 to go back to its original position.

So what I want to know is which is the best css property to use for this because I tried visibility:hidden and display:none and even though they both work when it comes to hiding Line 2 and making Line 2 reappear, they both don't allow Line 3 to move up automatically when Line 2 is invisible so it leaves a big gap in the middle which makes the appearance look a bit sloppy.

Thank You

Upvotes: 1

Views: 88

Answers (2)

FelipeAls
FelipeAls

Reputation: 22161

display: none; on line 2 should move up line 3 and below automagically as it won't preserve space. You've got another problem with your positioning; absolute positioning stated by @JCOC611 is a good bet.

See fiddle: http://jsfiddle.net/NFsN6/2/ where span is hidden by each method and thus p container has no visible content anymore but exhibit 2 different behavio(u)rs. 0 height in case of display: none; and still the same look but empty in case of visibility: hidden;

Could you please post some code that reproduces your problem?

Upvotes: 1

prodigitalson
prodigitalson

Reputation: 60413

Sounds like you answered your own question... visibility:hidden will preserve space in the layout for the element, while display:none will not, so seems to me like you want to use display, unless you also want to manipulate the height of the element itself to produce the effect.

Upvotes: 1

Related Questions