Seeking an elegant, CSS-only method for hiding/showing auto-height content (with transitions)?

Try this, The anti-margin: . Wrapper_6 { min-height: 20px } . Wrapper_6 .

Activator {z-index:10; position: relative} . Wrapper_6 . Content { margin-top: -100%; } .

Wrapper_6 . Activator:hover +. Content{ margin-top: 0 } jsfiddle.net/PWbXp.

Oh! I like it. My only qualm being that there is a slight delay on rollover due to the time it takes for the content to appear from beneath the 'activator'; doesn't play well with ease-in.

Otherwise, very good. – leifparker Sep 29 at 15:21 After some testing, realizing now that the delay is actually because the . Content is hidden very far up the page.

The margin:-100% is actually too arbitrary, as it is in relation to the width of the containing element (not to its own height). This would be (is) especially problematic with fluid designs, as the width of the container can shrink low enough to push the 'anti-margin'd . Content into visible areas.

Illustrated here : jsfiddle. Net/leifparker/PWbXp/1 (Try shrinking your window width, and you can see the 'anti-margin' example fail). Drat.

Thanks though! – leifparker Sep 30 at 17:56.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.

Related Questions