Positionner un <div> à droite d'un autre.
callipso
Messages postés
427
Date d'inscription
Statut
Membre
Dernière intervention
-
callipso Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
callipso Messages postés 427 Date d'inscription Statut Membre Dernière intervention -
Bonjour !
Je cherche à faire quelque chose qui je pense est assez simple, mais sur lequel je bloque.
Je m'explique :
J'ai dans mon code deux divs, l'un nommé .nouveautes et l'autre .body (celui de base).
Dans mon CSS, j'ai dupliqué les parties dédiées à .body pour les appliquer à .nouveautes.
Donc, j'ai deux div qui se placent l'une au dessus de l'autre. Dans ce cas, c'est la div nouveautes qui est au dessus.
Ce que je souhaite faire, c'est comme ceci :
https://openweb.eu.org/articles/initiation_float/ (la première section).
En gros, avoir mes divs comme cela :
Sauf qu'à la place que ce soit des paragraphes (<p>), je voudrais que ce soit mes divs.
J'ai donc essayé d'appliquer "float: right" sur .nouveautes dans le CSS, mais rien ne change.
Savez-vous comment je dois m'y prendre ?
Merci par avance !
Je cherche à faire quelque chose qui je pense est assez simple, mais sur lequel je bloque.
Je m'explique :
J'ai dans mon code deux divs, l'un nommé .nouveautes et l'autre .body (celui de base).
Dans mon CSS, j'ai dupliqué les parties dédiées à .body pour les appliquer à .nouveautes.
Donc, j'ai deux div qui se placent l'une au dessus de l'autre. Dans ce cas, c'est la div nouveautes qui est au dessus.
Ce que je souhaite faire, c'est comme ceci :
https://openweb.eu.org/articles/initiation_float/ (la première section).
En gros, avoir mes divs comme cela :
Sauf qu'à la place que ce soit des paragraphes (<p>), je voudrais que ce soit mes divs.
J'ai donc essayé d'appliquer "float: right" sur .nouveautes dans le CSS, mais rien ne change.
Savez-vous comment je dois m'y prendre ?
Merci par avance !
A voir également:
- Aligner une div à droite
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Ctrl droite ✓ - Forum Logiciels
- Chariot imprimante bloqué à droite - Forum Imprimante
- Barre droite mac ✓ - Forum MacOS
- Barre droite clavier - Forum Clavier
1 réponse
Salut,
Voici un exemple :
Bonne journée
Voici un exemple :
<style>
.body {
background: green;
}
.nouveautes {
float: right;
background: yellow;
}
</style>
<div class="body">
<div class="nouveautes">Les nouveautés</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu justo at ex maximus tempor sagittis id eros. Mauris vehicula quam arcu, et cursus magna pretium et. Nulla id vehicula velit. Curabitur non arcu ac risus maximus dapibus vitae quis urna. Nam laoreet sem ut leo gravida, in pulvinar libero venenatis. Phasellus ut metus volutpat, molestie nisi a, blandit ipsum. Integer venenatis ac elit et aliquam. Mauris lobortis pellentesque risus, a porttitor nisi pellentesque ut.
</div>
Bonne journée
En fait, mon premier div (le principal), est formé comme ça :
Donc j'ai tranformé ça en :
J'ai ensuite appliqué dans le CSS à .nouveautes : float: right;
Le résultat est le suivant :
Mon second div est bien dans le premier, mais il occupe toute la largeur, et ne se positionne pas à droite.
Comment faire ?
http://jsfiddle.net/oh6mx95g/
En fait, mon premier div avait comme proprieté dans le CSS la largeur égale à 960px. Mon second div, étant dans le premier, prenait aussi cette valeur, et donc occupait la même largeur ! J'ai finalement remplacé class="nouveautes" par id="nouveautes" et les . par des # dans le CSS, j'ai appliqué dans ce dernier une valeur plus petite pour le second div, et je crois que tout est bon !