28172 sujets

CSS et mise en forme, CSS3

Comment faire un div en bas à droite d' un autre

Bonjour,
Lorsque qu' on utilise la commande float, par défaut le bloc en question se met en haut.
J' aimerai faire la même chose mais avec le bloc qui se positionne en bas du bloc dans lequel il est positionné.
Je pense que ça doit être possible, j' ai vu qu' il s' agit probablement de la commande position:fixed mais j' avoue que je ne sais pas comment l' appliquer.
D' où ma question: comment fait-on ? Smiley rolleyes
Salut krystof Smiley smile ,

le plus simple s'il s'agit d'une image est de la mettre en background de l'élément conteneur.

Sinon, on peut utiliser la position: absolute;

Un exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style type="text/css" media="screen,projection"><!--
#conteneur {
	width: 600px;
	height: 400px;
	margin: 0 auto;
	background: #FF3300 url(mon_image.gif) bottom left no-repeat;
	position: relative;
}
#bas_droite {
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 200px;
	height: 100px;
	background-color: #3333FF;
}
--></style>
</head>
<body>
<div id="conteneur">
	<p>blabla</p>
	<div id="bas_droite">
	<p>blabla</p>
	</div>
</div>
</body>
</html>

S'il s'agit vraiment d'un float que tu veux (pour que le texte se place autour) j'avais vu une astuce dans ce sujet (non testé Smiley rolleyes ).

A+
Modifié par Heyoan (04 Jun 2008 - 22:15)
salut,
il nr s' agi pas d' une photo mais j' essaierai demain.
Je te remercie, je viendrai donner des nouvelles Smiley cligne
Sinon qu'est-ce qui t'empeche de faire dessiner ton div en dernier et float: right; comme ca:
#bas_droite {
 float: right;
}
------------------
<div>
contenu du div principal
<div id="bas_droite">contenu en bas à droite</div>
</div>

?
Modifié par Glide (05 Jun 2008 - 11:24)
Sujet clos
Aller à