Ahmar Ali
Ahmar Ali

Reputation: 1068

Div Items Move Up on toggle

I have four <div>. One of them is not displayed using display:none and is only displayed once you click an icon. When the item is clicked jQuery toggle function is called. One <div> is set to display:none and the one which was previously hidden is displayed. This is working perfectly but for some odd reason the page content moves 10 pixels or so up on toggle. I don't know what's causing it as all the <div> have same css and classes. Here is the css:

element.style {
margin-right: 5px;
margin-left: 10px;
left: 0px;
display: block;
}

#contactus {
background-color: #DDD;
position: relative;
position: relative;
left: 0;

}
@media (min-width: 1200px)
.span4 {
margin-left: 5px;
width: 320px;
}

span4 is the class for the toggled divs. Element styling is also the same. Can any one give me a hint what is causing this behavior. Here is the url: http://contestlancer.com/davidicus/ You can see it the problem if you click on message icon besides the logo heading.

Ahmar.

Upvotes: 1

Views: 1100

Answers (1)

Liam Allan
Liam Allan

Reputation: 1115

add a height to your logo header eg

height: 90px;

Upvotes: 1

Related Questions