Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Waves causes the elements to be displayed as block, which kills floating. #147

Open
zrepas opened this issue Feb 20, 2016 · 1 comment
Open
Milestone

Comments

@zrepas
Copy link

zrepas commented Feb 20, 2016

Hey!

First of all, I really like your plugin, the idea and the coding also.

I had problem, when I used the waves on floated elements. Since the plugin makes all the attached element to block formatted, thats made the attached container jumped for me (because of the CSS rule overflow: hidden).
So istead of this why you don't create a block inside the original element, and make that absolute positioned with overflow: hidden. This won't affect the original element at all, but still prevents the wave to move outside the element.
So that was my solution of my problem. :)

Also, really thanks for the plugin.

R

solution

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

@zrepas zrepas changed the title Waves causes the floating element to be displayed as block. Waves causes the elements to be displayed as block, which kills floating. Feb 20, 2016
@fians
Copy link
Owner

fians commented Feb 21, 2016

Great idea, I will put it on v0.8.0. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants