Positionner un <div> à droite d'un autre.

Fermé

callipso Messages postés 427 Date d'inscription vendredi 17 décembre 2010 Statut Membre Dernière intervention 30 mai 2016 - 29 août 2014 à 11:38
callipso Messages postés 427 Date d'inscription vendredi 17 décembre 2010 Statut Membre Dernière intervention 30 mai 2016 - 29 août 2014 à 13:06

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 !

A voir également:

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
29 août 2014 à 11:55

Salut,

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

callipso Messages postés 427 Date d'inscription vendredi 17 décembre 2010 Statut Membre Dernière intervention 30 mai 2016 5
29 août 2014 à 11:56

J'essaye de suite !

callipso Messages postés 427 Date d'inscription vendredi 17 décembre 2010 Statut Membre Dernière intervention 30 mai 2016 5
29 août 2014 à 12:15

Alors, voilà ce que j'ai fait :

En fait, mon premier div (le principal), est formé comme ça :


<div class="body">
<div>
<!-- la y a le contenu de ma page, etc. -->
</div>
</div>

Donc j'ai tranformé ça en :


<div class="body">
<div>
<div class=nouveautes">
<!-- contenu du div nouveautes -->
</div>
<!-- la y a le contenu de ma page, etc. -->
</div>
</div>

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 ?

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 29/08/2014 à 12:35

Il manque un guillemet d'ouverture devant ta classe nouveautes, la règle css n'était donc pas prise en compte (la largeur d'un div flottant est en fonction de son contenu, contrairement à un div non flottant qui prend par défaut toute la largeur).

http://jsfiddle.net/oh6mx95g/

callipso Messages postés 427 Date d'inscription vendredi 17 décembre 2010 Statut Membre Dernière intervention 30 mai 2016 5
29 août 2014 à 13:01

Ah oui pardon, mais le code je ne l'ai pas copié-collé, j'ai juste fait une erreur en l'écrivant ici. Sinon la guillemet est véritablement présente.

callipso Messages postés 427 Date d'inscription vendredi 17 décembre 2010 Statut Membre Dernière intervention 30 mai 2016 5
29 août 2014 à 13:06

Ho, je crois avoir trouvé !
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 !

Discussions similaires

Alignement du texte à gauche et à droite

Barre verticale droite sur clavier

Barre verticale droite sur clavier mac

le signe " | " dans excel

Touche du clavier barre verticale