css float et de la frontière problème

J'ai eu ce css:

.post-user {
    background:black;
    color:white;
    width:auto;
    float:left;
}
.img-side {
     border-style:solid;border-width:medium;width:75px;margin-bottom:2px;
}
.top-head {
    background:cyan;
    width:100%;
    height:20px;
    display:block;
}
.main-box {
    border-style:solid;
    border-width:1px;
    display:block;
    height:auto;
}

Et html ressemble tel :

<div class="main-box">
    <div>
        <div class="top-head"><span>At top</span>
        </div>
        <div class="side">
            <div class="img-side">
                <img src="http://st2.gsmarena.com/vv/pics/htc/htc-snap-1.jpg" width="75px" height="75px" />
            </div>
        <div class="post-user">User name</div>
        </div>
    </div>
</div>

démo

Mais la div post-user est d'aller à l'extérieur de la frontière.

Comment puis-je résoudre ce problème ?
(P. S. : quelque chose de similaire à disposition de forums)

Andrew et Ben réponses de travail et les deux ont leurs inconvénients. Ni est la victoire de solution afin de prendre une décision éclairée ici de ce que le chemin que vous voulez prendre.
j'aime andrew
ah ce n'est pas si facile u faut attendre un certain laps de temps. Je n'étais pas en mesure d'accepter à ce moment.

OriginalL'auteur kritya | 2011-09-02

  1. 8

    http://jsfiddle.net/PGFTz/5/ J'ai ajouté un clair de correction après post-user qui lui permet de rester à l'intérieur de la boîte.

    OriginalL'auteur jezza-tan

  2. 6

    ajouter overflow:hidden à votre .main-box css

    vaste explenation de savoir comment et pourquoi il fonctionne peut être trouvé ici

    http://www.quirksmode.org/css/clearing.html

    Un excellent guide pour le travail de flotteur peut être trouvé ici:

    http://www.alistapart.com/articles/css-floats-101/

    Désolé de cette réponse fonctionne parfaitement bien, mais je ne peux pas obtenir scorllers si je veux. Tellement malade clair. Grâce malade n' +1 😀

    OriginalL'auteur Benjamin Udink ten Cate

  3. 1

    Vous pouviez changer float:left à text-align:left

    .post-user { 
background:blue; 
color:white; 
width:auto; 
/*float:left;*/
text-align:left;
}

    Qui a fonctionné pour moi =)

    oui, cela fonctionne très bien en effet :> sharp. Je suis tellement habituée à avoir la plupart des éléments flottants que je l'ai suggéré, le overflow:hidden fixe par défaut, mais dans ce cas, seul le poste de l'utilisateur est flottant
    Ha, merci homme. J'essaie d'utiliser text-align quand je peux juste parce que c'est un peu plus facile (pour moi) de comprendre. Je commence à être confus quand trop de choses sont floating haha.
    Le texte est cependant aligné à gauche par défaut, donc pas de remplacer le flotteur, mais simplement de les retirer, permettrait également de résoudre le problème. Mais le poste de l'utilisateur prendra toute la largeur au lieu de seulement la largeur il doit contenir le texte
    Bon point! J'ai fini par utiliser text-align:left beaucoup parce que les sites que j'ai hérité de tout un construit-dans text-align:center que je ne peux pas changer. Donc, j'ai, souvent, la pensée center est par défaut haha. +1 sur votre réponse.

    OriginalL'auteur Josh Darnell