Positionner deux blocs div côte à côte

Fermé

Html
Div

vounce Messages postés 6 Date d'inscription lundi 14 octobre 2013 Statut Membre Dernière intervention 14 juillet 2015 - 9 févr. 2014 à 19:51
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 10 févr. 2014 à 03:54

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;

A voir également:

1 réponse

Réponse 1 / 1

Rajo
10 févr. 2014 à 02:28

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

Rajo
Modifié par Rajo le 10/02/2014 à 02:45

et comme je suit sympa un exemple de positionnement avec CSS:

.bloc_gauche.div{
float:left; 
}
.bloc_droite.div{
float:right;
}

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).

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 10/02/2014 à 03:55

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

Discussions similaires

Comment mettre 2 <div> cotes a cotes ?

2 div cote a cote dans une div

affichage d'un tableau en javascript

[html] cacher ou afficher des éléments

mettre deux images cote a cote.

paragraphe cote a cote