div qui se déplace quand on écrit du texte

Sujet résolu

12 mars 2018 à 18:20:07

Bonsoir, j'ai un problème avec mes box :

dés le moment ou j'écris du texte à l'intérieur de l'une des box ils se décalent vers le bas, quelqu'un serait pourquoi ? :

j'aimerais savoir aussi si il est possible de créer d'autres colonnes collé avec la box à gauche svp, si oui comment ?

Merci d'avance.

HTML :

<html>
   <head>
       <title> formulaire d'inscrption</title>
       <link href="test.css" rel="stylesheet" media="all" type="text/css" />
       <meta charset="utf-8">
   </head>


   <body>



<div class="bloc">
   <div class="column-left">
    TEXTE 

   </div>

   <div class="column-right">
 
   
 </div>

</div>

 
 
 
   </body>
</html>

CSS:

.bloc{
  margin: 0 120px 0 120px;
}

.column-left{

    display: inline-block;
    border:2px solid red;
    width: 45%;
    height: 20%;
}

.column-right{
    display: inline-block;
    border:2px solid red;
    width: 45%;
    height: 20% ;
     }

-
Edité par FarCry 12 mars 2018 à 18:23:51

x1mus

12 mars 2018 à 18:24:30

Salut !

J'ai juste copier coller ton code sur CodePen et aucun soucis ^^

https://codepen.io/MaxBresil/pen/eMpzMJ

mootookoi

12 mars 2018 à 18:38:43

Aucun souci si on met du texte dans la deuxième div. Mais si on n'en met pas, le souci est présent.

C'est à cause du vertical-align qui a par défaut la valeur baseline.

Appliques un vertical-align: top; et le problème est réglé.

Sinon tu peux aussi, au lieu de les mettre en display: inline-block, appliquer un display: flex sur le .bloc.

C'est une autre solution.

Dev Web Full Stack ( si si c'est possible )

x1mus

12 mars 2018 à 19:16:04

BoOYa a écrit:

Aucun souci si on met du texte dans la deuxième div. Mais si on n'en met pas, le souci est présent.

C'est à cause du vertical-align qui a par défaut la valeur baseline.

Appliques un vertical-align: top; et le problème est réglé.

Sinon tu peux aussi, au lieu de les mettre en display: inline-block, appliquer un display: flex sur le .bloc.

C'est une autre solution.

Je n'avais pas vu J'ai aussi appris quelque chose ! Merci

(J'utilise tout le temps le display: flex en même temps ^^)

-
Edité par x1mus 12 mars 2018 à 19:18:14

FarCry

13 mars 2018 à 20:20:53

Merci pour votre aide !

Mais pourquoi quand j'essaie de mettre une deuxième box en dessous je n'y arrive pas :

Elle se positionne directement dans la box de gauche alors que moi je voudrais qu'il se positionne en dessous avec les mêmes dimensions...

HTML :

<html>
   <head>
       <title> formulaire inscription php </title>
       <link href="test.css" rel="stylesheet" media="all" type="text/css" />
       <meta charset="utf-8">
   </head>


   <body>



<div class="bloc">
  <div class="column-left">
   <div class="content"> MON TITRE
   </div>
<div class="column-left2">
  MON TITRE 2

</div>  


  </div>
  <div class="column-right">
  </div>
</div>



 
 
   </body>
</html>

CSS:

.bloc{
  margin: 0 120px 0 120px;
}
 
.column-left{
 
    display: inline-block;
    border: 2px solid red;
    width: 45%;
    height: 100px;
        vertical-align: top;
}
 
.column-right{
    display: inline-block;
    border: 2px solid red;
    width: 45%;
    height: 100px;
        vertical-align: top;
}


.content{
    background-color: red;
    font-family: impact;
    font-size: 20px;
    color: white;
    text-align: center;
}


.column-left2{
 
    display: inline-block;
    border: 2px solid red;
    width: 45%;
    height: 100px;
    vertical-align: top;
}

-
Edité par FarCry 13 mars 2018 à 20:24:21

Lamecarlate

13 mars 2018 à 21:24:08

Bonjour,

tu as mis la div de classe "column-left2" dans celle de classe "column-left", donc c'est normal.

Pense à mieux indenter ton HTML, tu y verras plus clair

Pas d'aide concernant le code par MP, le forum est là pour ça :)