Discussion :

[soeursourire]

Bonjour,

J'ai un soucis de décalage de mes blocs sous IE comme vous pouvez le voir avec cet exemple:
http://codepen.io/JARLIER/pen/PpoXyj

Sous Chrome, mes 4 blocs questions grisées sont alignés alors que sous IE, le dernier bloc est décalé parce que le texte de la question est plus long...

Auriez-vous une idée d'ou pourrait venir mon problème et comment le résoudre?

Je n'avais pas non plus utilisé "white-space: nowrap" sur ma classe wrapper-quiz sinon mes blocs dépassaient du cadre de 928px, ce que je n'ai pas non plus bien compris pourquoi...

Merci pour votre aide

[Invité]

Bonjour,

une solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.wrapper-question {
    display: block;
    float:left;
    width: 49.5%;
 
    margin:0 0 5px 0.5%;
    white-space: normal;  
    background-color: gray;
}

une autre (flex) :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper-quiz {
    -webkit-display: flex; /* Safari 6.1+ */
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
 
    background-color: #F5F5F5;
    margin: 0 auto;
    width: 928px;
}
.wrapper-question {
    flex:1 0 49.5%;
    white-space: normal;
    margin:0 0 5px 0.5%;
 
    background-color: gray;
}

Par contre, tu as des id identiques, alors qu'ils doivent être UNIQUES.

De fait, quand on clique sur un choix dans les blocs 2, 3 ou 4, c'est le choix du bloc 1 qui s'active.
A corriger.

[soeursourire]

Super merci!

Oui pour les id c'est parce que j'ai fait du copier coller dans codepen.

Merci encore