Float right marche pas...

JMERISE
Les bases HTML/CSS

Bonjour / Bonsoir,

Je publie ce post ici car depuis hier j'ai un petit problème au niveau d'un float right sur une div
J'ai trois div aligner l'un à côter de l'autre avec un float left sur les premier, mais la dernier a un float right qui ne marche pas...
Je vous montre mon code pour vous situer un peux :

            <div class="content_right_avatar">
                <div class="name_user_brn">
                    <h1><a href="">name</a></h1>
                    <h4><a href="">name</a></h4>
                </div>
                <div class="content_info_pfs">
                    <div class="info_pfs_user">
                        <h3><span>568</span>Publications</h3>
                    </div>
                    <div class="info_pfs_user">
                        <h3><span>1 685</span>abonnés</h3>
                    </div>
                    <div class="info_pfs_user">
                        <h3><span>9 375</span>suivis</h3>
                    </div>
                </div>
                <div class="content_follow_user">
                    <div class="follow_button">
                        <button class="subscribe"><i class="fa fa-user-plus" aria-hidden="true"></i>S’abonner</button>
                    </div>
                    <div class="follow_button" style="display: none">
                        <button class="subscriber"><i class="fa fa-check" aria-hidden="true"></i>Abonné</button>
                    </div>
                </div>
            </div>

quand je dit le dernier div c'est bien la div qui a la class .content_follow_user

si une personne pouvais m'aider a résoudre le problème sa serais vraiment gentile.

Cordialement,

6 réponses

Daprod
Réponse acceptée

Salut,
Je crois que c 'est ces deux règles qui masque l'effet du float: right; de content_follow_user dans ton css :

.bannier_bottom_content .content_bottom_bannier .content_right_avatar {
  display: inline-block;
  float: left;
}

la div content_right_avatara besoin d être en display: block; afin d'hériter automatiquement de toute la largeur disponible sur sa ligne, a la droite de avatar_user qui elle a une largeur fixe et est deja en float:left.

Hors si content_right_avatar est en inline-block ou en float, elle n'occupera que l'espace nécéssaire pour couvrir les elements qu 'elle contient.

supprime ces deux regles et voit si ça marche pour toi aussi.

Huggy

Ca fonctionne chez moi en mettant :

.name_user_brn {float:left }
.content_info_pfs {float: left}
.content_follow_user{ float:right}

tu dois avoir un pb avec d'autres classes qui perturbent

Daprod

Salut, Mikayil
Si l'idée est d'aligner le contenu de la div content_follow_user complètement à droite, il suffirait de rajouter cette regle:

.content_follow_user {
    text-align: right;
 }

sinon, quand tu dis: "mais la dernier a un float right qui ne marche pas...", pourrait-on avoir plus de précisions sur ce que tu cherches à accomplir ?

mxmaxime

Salut,
Je n'aime pas intervenir sur un post sans donner d'aide (comparé à certaines personnes ahah) mais lorsque vous avez un problème ce serait vraiment bien de donner un codepen, histoire qu'on puisse vraiment voir le problème et aider.. C'est plus facile pour nous de résoudre un pb avec un codepen ;)

JMERISE
Auteur

Bonsoir désolée pour le retard...

@Daprod dsl mais le 

.content_follow_user {
    text-align: right;
 }

marche pas chez moi, voila j'ai mis mon code dans codepen : http://codepen.io/anon/pen/wzEJdb

JMERISE
Auteur

Bonsoir,

@Daprod ok merci pour t-on aide qui ma beaucoup aider.
Effectivement cella venais bien du :

.bannier_bottom_content .content_bottom_bannier .content_right_avatar {
  display: inline-block;
  float: left;
}

Encore une fois merci pour t-on aide est les autres :)