Menu
I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
765
You set that div with a height that matches the div on the left, then add a child div that is scrollable and expands to 100%. See this fiddle. You can try to fine tune the effect you want to achieve by replacing height by either max-height or min-height . Hope it helps.
In order to pull an html element out of the natural flow of how the elements are layed out on the screen you need to use position: absolute. This will allow the element to become a layer above the other elements (assuming that the z-index value is greater than all other's).
Use absolute positioning and instead of setting the offset with top use bottom . With this property you can ensure the position of the bottom edge of your div - any change in size will force the div to expand upwards.
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
50
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
