Positionnement d'un élément d'une liste animée

Bonjour,
j'ai réaliser une liste d'élément générés dynamiquement avec twig dont la taille se modifie lors du survol, le problème étant que lorsque je survol un élément, les éléments positionnés en dessous se décalent lieu de rester positionnés à gauche (car le height de l'élément survolé grandi) .
ma question est donc la suivante : comment forcer les éléments positionnés en dessous à rester à gauche ?

merci par avance !

html:

Code:

1
2
3
4
5
6
7
<ul class="ma-liste">
{% for élément in éléments %}
   <li id="conteneur">
       <div id="contenu"></div>
   </li>
{% endfor %}
</ul>

css :

Code:

1
2
#contener{width:25%; float:left; margin-top:10px; margin-bottom:10px;} 
#contenu{ width:95%;}

Javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('.ma-liste li').mouseover(function(){
        if (current && $(this).index() != current.index()){
            current.find('#contenu').stop().css({ width : '100%'
        }).animate({
            width : '95%'
        }, 'slow');
        }
        if (current && $(this).index() == current.index()){
            return null;
        }
        $(this).find('#contenu').stop().css({
            width : '95%'
        }).animate({
            width : '100%'
        }, 'slow');
        current = $(this);
    });
});

Code:

1 2 3 4 5 {% for élément in éléments %} <li id="conteneur"> <div id="contenu"></div> </li> {% endfor %}
Un id DOIT ÊTRE UNIQUE SUR LA PAGE

=> soit tu incrémentes les id
=> soit tu mets un class

merci pour cette info,
j'ai changé mes id en class mais cela ne change pas le fait que mes éléments positionnés au dessous de l'élément survolé ne restent pas à leurs position initiale...

current = ?

var current = null;