What causes div elements to move when hovering over one element?

Question

So basically I float all my div elements (icons) to the left and margin left them to create space In between them and I display them inline. The problem I have now is that whenever I hover over one element(icon) the rest of the elements moves. Please can you explain what causes this, thanks a lot. Examples will be gladly appreciated.

css:

    .facebookIc{
    font-size: 80px;
    margin-left: 120px;

    -webkit-transition: font-size 0.3s linear;
    }

    i.icon-facebook-circled:hover{
        color: #3b5998;
        font-size: 90px;
        -moz-transition: all 0.3s ease-in;
        /* WebKit */
        -webkit-transition: all 0.3s ease-in;
        /* Opera */
        -o-transition: all 0.3s ease-in;
        /* Standard */
        transition: all 0.3s ease-in;


    }


    .twitterIc{

    font-size: 80px;
    margin-left: 120px;
    -webkit-transition: font-size 0.3s linear;
    }

    i.icon-twitter-circled:hover {
       font-size: 90px;
        color: #00aced;
        -moz-transition: all 0.3s ease-in;
        /* WebKit */
        -webkit-transition: all 0.3s ease-in;
        /* Opera */
        -o-transition: all 0.3s ease-in;
        /* Standard */
        transition: all 0.3s ease-in;
    }

.contactContent{
position: relative;
height: auto;
width:100%;
background: #b7d84b;
opacity: 0.8;
overflow:auto;
padding: 20px 20px;
}

html:

<section  id = "contactContent" class="contactContent">
<div>
<i class="icon-gplus-circled gplusIc"></i>
<i class="icon-facebook-circled facebookIc"></i>
<i class="icon-mail-circled mailIc"></i>
<i class="icon-twitter-circled twitterIc"></i>
<i class="icon-soundcloud-circled soundcloudIc"></i>
</div>
</section>

Answer 1

There could be a number of factors, the most obvious would be in your CSS having a :hover set on the element to increase a font-size or change something which would affect its position or size.

We would need to see code to be sure and verify thats the problem.

EDIT

So looking through your code, i can see one major flaw. As i guessed the :hover was affecting the placement.

Your setting the font-size to be 80px and then on the hover, upping that to be 90px. That will then increase the size the container needs to be. Unless you set a max-height/width on the element or set the overflow to hidden it will always increase in size when you modify something that will increase in size, even by a single pixel.

Its hard to try and amend the code for you without seeing the full code (the piece you added was only a snippet) and also needing to know how it looks.

If you could get it into a jsFiddle then i could try fix it up but its best to learn yourself where your going wrong and then how to fix it yourself.

Hope this all makes sense to you.

Answer 2

Your elements are most likely wired up with a mouse over effect that changes the border around each element. Hovering over the element will change the dimensions of the element. Since they are all floated they will move around as best they could to accommodate the altered element.