Bonsoir,

Je suis en train de développer un site, et j'ai un probleme d'escalier:
-dans une div j'en est mis 3 autres en ligne à 33.333%:
<div>
---<div>
---<div>
---<div>
</div>

Mon problème c'est que lorsque je réduis la taille de la fenêtre l'effet escalier apparait, qu'en pensez vous?

Merci d'avance

Utilise le CSS

beh oui c'est ce que j'ai fais mais je pense pas que tu fais compris mon probleme, voici un screen:

j'aimerais que mes 3 div restent alignés lors du rétrécissement de fenêtre, or la elle sont décalés et pour qu'on voit j'ai mis le background color de la div qui les contient en jaune.

Ta changer la taille de la div parent?

J'ai donné une hauteur fixe à la div parent (650px) et les div enfant sont en height auto et with 33.333%.

Dis moi tu veux faire quoi exactement? ^^
Il y a peut être plus simple en voyant ton début de structure et ta capture.

Tu ne pas nous donner la partie où tu as le soucis afin de voir plus précisément.

Beh en fait j'ai ça:
http://codepen.io/anon/pen/yNNgzO

C'est assez basique mais lorsque je rétrécie ma fenetre de navigateur dans mon code qui lui ressemble dans la construction (il y a du juste du contenu à l'intérieur des enfants), il se crée ces décalages verticaux que je souhaite faire disparaitre.

Voici le webdesign simple que j'imagine:

J'espère vous avoir éclairci sur mon problème

Donne nous ton code à toi, avec celui que tu nous a fais sur codepen il y aura aucun problème.

Voici mon code exact:

http://codepen.io/anon/pen/WvvRLr

Le problème vient de ton h2 qui est trop gros, c'est sa qui fait décaler ton bloc ;)

Rajoute une hauteur a ton H2 est le problème est réglé ;)

Tout d'abord merci. Mais j'ai essayé en rajoutant une height à h2 et en modifiant la taille de la police avec font-size mais ça ne marche pas.

Alors je sais pas si c'est ça mais pouruqoi tu as mis un padding de 5% dans la classe real?
SI tu l'enlèves alors cela restera tout bien aligné.

Ou sinon, tu enlèves 10% (soit 23% et quelques) à ton width de ta classe real afin d'avoir les 3bien alignés.

C'est bien ça que tu veux faire?

Et place un float left à ta classe real.
Cela devrait régler ton soucis.

J'ai mis le padding pour espacer le contenu sinon les zones de textes sont collés et c'est illisible.

Si j'enleve 10%, ça devrais marcher mais le contenu ne sera pas réparti équitablement.
Et je ne comprends pas qu'es ce que le float changera et a quoi il servira.

En faisant ça sur la classe real alors tu auras tes 3 colonnes qui seront réparties équitablement sur toute la largeur de ta page.
Et tu n'as pas le soucis avec cette fameuse bande jaune en réduisant la fenêtre.
Tu peux le tester sur ton lien, tu verras ça marche :D.

.real {
display: inline-block;
height: 100%;
width: 23.333%;
background-color: #303030;
padding: 5%;
float:left;
color: white;
}

J'ai ajouté le float et ça marche merci
Cependant je ne sais toujours pas pourquoi ça marche

pourtant chez moi sa marche niquel...

http://s12.postimg.org/iq002axnx/loul.jpg

Le 30 avril 2015 à 18:03:12 nikoopy a écrit :
En faisant ça sur la classe real alors tu auras tes 3 colonnes qui seront réparties équitablement sur toute la largeur de ta page.
Et tu n'as pas le soucis avec cette fameuse bande jaune en réduisant la fenêtre.
Tu peux le tester sur ton lien, tu verras ça marche :D.

.real {
display: inline-block;
height: 100%;
width: 23.333%;
background-color: #303030;
padding: 5%;
float:left;
color: white;
}

Dans ce cas la inutile de mettre display:inline-block si on utilise un float.

Met des commentaires entre tes div et garde display:inline-block; et enlève le float pour pas briser ton site.

Sa fera <div></div><!--
--><div>...

comme sa. sa va enlever le mini px que le display:inline-block créer.