Positionner deux blocs div côte à côte [Fermé]

Signaler
Messages postés
6
Date d'inscription
lundi 14 octobre 2013
Statut
Membre
Dernière intervention
14 juillet 2015
-
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour,

Je suis étudiant en tant que Webmaster (débutant) et j'ai un souci pour l'un de mes devoirs. Le but est de positionner deux blocs l'un à côté de l'autre. J'arrive au résultat le bloc de droite se décale légèrement vers le bas par rapport à celui de droite.
Merci de votre aide et voilà mon travail :
HTML

<body>
<div id="bloc_1">
<div id="bloc_2">Bloc 2</div>
</body>

CSS

#bloc_1 {
width:250px;
height:250px;
position:relative;
top:200px;
left:300px;
background-color: green;
border:5px #000 solid;
text-align:center;
}

#bloc_2 {
float:right;
margin:0;
width:250px;
height:250px;
position:absolute;
top:0px;
left:400px;
background-color: green;
border:5px #000 solid;
text-align:center;

1 réponse

Salut,

Vous devez fermer votre premier div(s'agit il d'un oubli de copier coller?).

Après pour positionner 2 éléments il existe de nombreuses méthodes. Il suffit d'en utiliser une seule et là vous essayez d'en mettre plusieurs à la fois, forcément c'est un peu contradictoire.

Virez déjà vos position relative (sur le premier div? c'est relatif à quoi?) et le deuxième vous le mettez en absolute donc forcément il ne tient pas compte de l'autre div qui le précéde.
Or de nombreuses méthodes de positionnement se basent sur positionner un élément par rapport à un autre(par exemple avec float) dans l'ordre de leur apparition, donc on positionne le second par rapport au premier(tandis que là vous essayez de faire l'inverse). Si vous mettez absolute le positionnement se fait par rapport à .. je vous laisse relire votre cours.

Sinon vous avez cela aussi ça:
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
et comme je suit sympa un exemple de positionnement avec CSS:

.bloc_gauche.div{
float:left; <!----- POSITIONNEMENT FLOTTANT A GAUCHE(par rapport à l'élement suivant)-->
}
.bloc_droite.div{
float:right;<!----- POSITIONNEMENT FLOTTANT A DROITE(par rapport à l'élement précédent)-->
}

N'oubliez pas que float est à utiliser avec parcimonie, le 'flottement' des balises indiquent qu'elles sortent du flux, il est parfois nécessaire de rétablir le flux(ordre naturel des éléments) en indiquant avec un élément qui va suivre la propriété css clear:both; comme une balise de saut de ligne:

<br style='clear:both;' />

*notez aussi que bloc_gauche et bloc_droite sont déjà plus parlant que bloc-1 bloc-2, imaginez vous en avez 50 comment allez vous reconnaître à quoi correspond bloc_37 ? Impossible tandis qu'en écrivant à quoi correspond quoi de façon explicite ça aidera.

*j'ai utilisé une class plutôt qu'une id car si vous voulez réutiliser vos classes vous pouvez(contrairement à l'id qui est unique comme vous le savez).
le .div de bloc_gauche.div n'est pas obligatoire, il oblige par contre(en le mettant) à utiliser la classe pour un div uniquement(en général ce sont les div(de divide) qui sont utilisés pour ça, span étant l'équivalent mais pour un élément de texte uniquement(donc dans une balise de texte).
Messages postés
2853
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
561
Il y a mieux encore
au lieu d'utiliser 2 div avec des id différentes utiliser 2 div avec la meme class

<div class="div1></div>
<div class="div1></div>


le css

.div1 {
width:200px;
height:200px;
display:inline-block;
border: 5px solid black;
background-color: green;
text-align:center;
}

seul truc inline-block crée un espace entre les 2 div appelé white-space mais une petite recherche te donnera quelques astuces pour résoudre le problème du white space.
tu peux faire aussi le width en pourcentage pour avoir du responsive