CSS div de se chevaucher

Je suis en train de construire une section de commentaires pour mon site. Dans la section des commentaires, je veux qu'il énoncés wordpress-style, avec l'avatar à gauche. Il fonctionne, mais ce qui se passe est que le texte du commentaire est d'emballage autour de l'avatar en dessous. Pour un exemple, ici. C'est probablement ce qui a une solution simple, mais je suis un CSS amatuer. C'est le XHTML et CSS:

<div class="comment">
 <div class="left">
  <img src="images/noavatar.png" alt="No Avatar" />
 </div>

 <div class="right">
  <h3>Laura Brauman</h3>
  <span>12 March 09</span>
  <p>Nunc ultrices nisi ut tellus. In placerat tempus quam. Nulla dolor nulla,dictum eget, auctor a, rutrum sit amet, ante. Sed scelerisque est.            Vestibulum arcu purus, dignissim nec, rhoncus id, sodales eu, quam. Nullam congue hendrerit enim. Phasellus risus. Pellentesque lacus sem, luctus tempus.</p>
 </div>
</div>


/*------- COMMENTS -------*/
#comments
{
    width: 91px;
    height: 18px;
    background: url(images/comments.png) no-repeat;
    text-indent: -9000px;
    margin-bottom: 10px;
}

div.comment
{
    padding: 5px 5px 30px 5px;
    background: url(images/commentbar.png) bottom center no-repeat;
    margin-bottom: 10px;
}

div.comment div.left { margin-left: 10px; float: left; width: 51px; }
div.comment div.right { width: 482px; }
div.comment div.right h3 { color: #e6267c; font-size: 18px; display: inline; text-transform: uppercase; }

OriginalL'auteur Tom | 2009-04-03

  1. 0

    Ajouter à div.droit

    margin-left: 51px;

    OriginalL'auteur Luca Matteis

  2. 22

    De la spec:

    Depuis un flotteur n'est pas dans le flux, les non-bloc placé des boîtes créé avant et après le flotteur de la boîte de flux verticalement, comme si le flotteur n'existait pas.

    Cela signifie que les éléments avec display: block qui ne sont pas disposés ignorer le flotteur.

    Cependant, la ligne de boîtes créé à côté du flotteur est réduite à faire de la place pour la zone marge du flotteur.

    Cela signifie que les éléments en ligne ne circule autour des flotteurs. C'est pourquoi votre <span> et le texte à l'intérieur de <p> flux autour de div.left, même si le <p> et div.right ne le font pas.

    La zone de bordure d'un tableau, d'un bloc remplacé élément ou un élément dans le flux normal, qui établit un nouveau bloc de mise en forme de contexte (par exemple un élément avec 'débordement' autre qu 'visible') ne doivent pas se superposer de flotteurs dans le même bloc de mise en forme de contexte comme l'élément lui-même. Si nécessaire, des mises en œuvre de claire le dit élément en le plaçant au-dessous de ce qui précède, les chars, mais peut placer adjacentes à ces flotteurs si l'espace est suffisant.

    Et, qu' - obtus comme il est - est la réponse à votre problème. Vous devez insérer un "nouveau bloc de mise en forme de contexte".

    Les chars, les éléments en position absolue, inline-blocks, table de cellules de tableau, les légendes, et les éléments avec 'débordement' autre qu 'visible' (sauf lorsque cette valeur a été propagée dans la fenêtre d'affichage) établir un nouveau bloc de mise en forme des contextes.

    La méthode la plus simple pour vous estUn: 

    div.right { overflow: auto; }

    Note que vous avez probablement aussi voulezUn:

    div.comment { overflow: auto; }

    De fixer une relative, mais le problème est différent. Si votre <p> contenu est plus courte que votre image, puis de la flottait div.left sera pas augmenter la hauteur de div.comment. L'ajout de overflow: auto; vous emmène dans le bien nommé Les Cas Compliqués partie de la spec:

    Si [niveau des blocs, non-remplacement des éléments dans le flux normal quand 'débordement' ne calcule pas de 'visible'] élément a tout flottante descendants dont la marge du bas de bord est en dessous de la base, la hauteur est augmentée pour inclure ces bords

    Qui dit essentiellement que les chars ne peuvent qu'élargir overflow <> visible contenant des éléments.

    Un overflow: hidden; également de travailler, mais serait des cultures de contenu au lieu de lancer des barres de défilement si nécessaire.

    Wow... super explication!

    OriginalL'auteur Mark Brackett

  3. 2

    Ce que vous voyez n'est que des éléments inline respecter flotte mais les éléments de niveau bloc ne le font pas. Vous devez manuellement l'espace autour d'eux ou de flotteurs se chevauchent.

    Ou flotteur de l'autre élément de niveau bloc.

    OriginalL'auteur cletus

  4. 0
    div.right { float: left; width: 482px; }

    OriginalL'auteur Kevin Crowell