Search code examples
jqueryhtmlslidetoggle

Div appears beyond parent div on slideToggle


I have created a div such that the when the mouseenter is triggered, another div must get viewed and this is achieved with slideToggle. Now my problem is that the div which must toggle appears partially outside the page towards the right and is not visible unless the user scrolls right. How can I prevent this? I want the div the appear in the next line and don't want the page to expand sideways as that breaks the experience.

EDIT: The page works fine in most conditions but exhibits this on chrome + wide screens

You can see this here on hovering over the images on the orange div ater the first page down


Solution

  • Just to have an answer here instead of solely comments. The issue was related to the float attribute (actually not the image that resizes). The items before your descriptions are set to float left, so the descriptions think that when there's enough space, they should sit to the right of the floated elements. So for this, for each of your description DIVs that comes after a register button, you should add the CSS attribute:

    clear:both;