Problème pour aligner deux blocs

[Eddard]

Salut à tous !

Je sais qu'il est tard et je ne pense pas recevoir de réponse avant demain matin, mais justement, je prend de l'avance ^^

Je suis actuellement en train de créer le design de mon forum. Il est presque fini et j'en suis à la PA. Seulement, j'ai un gros problème, et cela n'est pas la première fois que ça m'arrive : je n'arrive pas à aligner deux blocs, comme vous pouvez le voir sur ce screen : https://i.imgur.com/KDZBHGU.png

Comme vous le voyez, le bloc devrait se trouver à l'endroit pointé par les flèches mais décale bêtement vers le bas, sous les forums. J'ai essayé plusieurs techniques pour en venir à bout, comme les margin (j'ai aussi essayé de faire, par exemple, margin-left: -1px au lieu de margin-right: 1px;), position:absolute (ne marche pas car ça décale selon l'écran et le navigateur), display: block, inline, inline-block... Rien.

Pouvez-vous m'aider ? J'aimerais vraiment pouvoir en finir et ouvrir mon forum pour de bon !

Merci beaucoup !

P.S: Au cas où, voici les codes HTML et CSS de la PA :

HTML :

Code:

<div style="width: 95%; height: 346px; border-top: 3px solid #279798; border-bottom: 3px solid #279798; border-left: 1px solid #279798; border-right: 1px solid #279798; background: url(http://i.imgur.com/CgLJidx.png) no-repeat, #FFFFFF;">
   
   <div class="colonne1">Texte
   </div>
   
   <div class="colonne2">
       Texte
   </div>
</div>

CSS :

Code:

/*CSS de la PA*/

.colonne1 {
  display: inline-block;
  width: 230px;
  height: 315px;
  border-top: 3px solid #279798;
  border-bottom: 3px solid #279798;
  border-left: 1px solid #279798;
  border-right: 1px solid #279798;
  background: #FFFFFF;
  padding: 5px;
  margin-top: 7px;
  margin-right: 550px;
  text-align: left;
}

.colonne2 {
  display: inline-block;
  width: 230px;
  height: 315px;
  border-top: 3px solid #279798;
  border-bottom: 3px solid #279798;
  border-left: 1px solid #279798;
  border-right: 1px solid #279798;
  background: #FFFFFF;
  padding: 5px;
  margin-top: 7px;
  text-align: left;
}

[MasDan]

Bonjour,

Il faut utiliser «float» pour attacher vos «div» à la bordure..

Remplacer vos codes par ceci

HTML

Code:

 <div class="divSup">
    <div class="colGau">
  Texte du bloc de gauche
    </div>
    <div class="colDr">
      Texte du bloc de droite
    </div>
  </div>


CSS

Code:

.divSup {
 width: 95%;
 height: 336px;
 border-top: 3px solid #279798;
 border-bottom: 3px solid #279798;
 border-left: 1px solid #279798;
 border-right: 1px solid #279798;
 background: url(http://i.imgur.com/CgLJidx.png) no-repeat, #FFFFFF;
   padding: 5px;
 margin: auto;
 }

.colGau {
  float: left;
 }
 
.colDr {
  float: right;
}

.colGau, .colDr {
  width: 230px;
  height: 315px;
  border-top: 3px solid #279798;
  border-bottom: 3px solid #279798;
  border-left: 1px solid #279798;
  border-right: 1px solid #279798;
  background: #FFFFFF;
  text-align: left;
}

[Eddard]

Merci beaucoup ! J'avais complètement oublié float !