I am wondering how I can extend the "div" without affecting the layout of other elements on the page. In particular, I would like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/ . If you hover over any product, you will see that the window expands the display of additional information; however, other extensions, such as the product image below, are independent of the extension.
use absolute position.rather, you can also achieve the same effect by writing an onhover event in a div with an extra div added to this position with a higher z-index.
use absolute positioning and then you can grow / shrink the div and it will not affect other elements around it.
Add position:absolute; into the style of your div. Thus, it will not interfere with other elements, but it will still overlap them, and you can specify any width and height for them.
position:absolute;
Position your div absolutely and make sure the z-index is at the top level. This can be done using only CSS, but with js it will probably be easier.