Positionnement de div

[Résolu/Fermé]
Signaler
Messages postés
307
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
17 février 2011
-
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
-
Bonjour,

ça fait un petit moment que je cherche partout sur le net, que j'expérimente, à peu près tout, mais je n'arrive pas à placer mes div comme je le souhaite.

J'ai une div container, qui fait 770px de large sur 170 px de haut.
Dedans je veux centrer deux autres div, qui font chacune 70px par 70px.

En gros j'ai ma div container, dans laquelle je veux mettre mes div1 et div2.
La div1 doit être à 210px du bord gauche, 50px du haut, et la deuxième à 210px du bord droit, et 50px du haut., ce qui laisse 210px entre les deux, et 50px en bas de chacune.

Si quelqu'un pouvait m'éclaircir sur les propriétés CSS telles que position, float et tout ça, ça serait très sympa.

Merci d'avance.

2 réponses

Messages postés
307
Date d'inscription
mardi 20 mars 2007
Statut
Membre
Dernière intervention
17 février 2011
55
En fait j'ai réussi tout seul.
J'ai utilisé plein de div, que j'ai mises à la suite. C'est pas très propre, mais ça marche...
Messages postés
18594
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
28 août 2021
4 318
Dans le CSS :
#contenair {
	width: 670px;
	margin: auto;
	border: solid 1px #444;
	background: #eee;
	padding:50px;
}

#div1 {
	border: solid 1px white;
	background: #444;
	color: white;
	width: 70px;
	height: 70px;
	margin-left: 160px;
	float: left;
}

#div2 {
	border: solid 1px white;
	background: #444;
	color: white;
	width: 70px;
	height: 70px;
	float: right;
	margin-right: 160px;
}
Et le XHTML :
<div id="contenair">
	<div id="div1">Salut 1</div>
	<div id="div2">Salut 2</div>
	
	<div style="clear:both;"></div>
</div>

J'ai préféré mettre un padding de 50px sur la div qui englobe les deux autres. Ce qui explique pourquoi j'ai mis 160px et pas 210px aux margin-left et -right : il y a déjà 50px entre la bordure et le contenu, alors il en faut encore 160px pour faire les 210px entre la bordure et la boite. Pour la largeur de #contenair, c'est 660px car le contenu fait 660px, mais on lui ajoute 2*50px pour faire la bordure interne (entre le contenu et la bordure) : ça fait 710px. En réalité, ton div en fait même 712 car il y a 1px de la bordure de gauche, et un autre à droite.

M'enfin ... c'est simple, il suffit de comprendre le principe de la mise en boîte en CSS. Ça t'aidera sûrement : https://www.w3schools.com/CSS/css_boxmodel.asp