superposición CSS div

Question

Estoy intentando crear una sección de comentarios para mi sitio web. En la sección de comentarios, quiero que tenga el estilo wordpress, con el avatar a la izquierda. Funciona, pero lo que está sucediendo es que el texto del comentario está envolviendo el avatar debajo. Por ejemplo, here. Esto probablemente tiene una solución simple, pero soy un amatuer de CSS. Este es el XHTML y CSS relevante:

<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; } 

Answer 1

añadir esto a div.right

margin-left: 51px; 

Answer 2

Lo que están viendo es que los elementos en línea respetarán los flotadores sino elementos de bloque no lo hacen. Tienes que desplazarte manualmente alrededor de ellos o los flotadores se superpondrán.

O bien eso o flotar el otro elemento de nivel de bloque.

Answer 3

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

Answer 4

Desde el spec:

Desde un flotador no es en el flujo, cajas de bloque no posicionado creadas antes y después de la caja de flotador flujo verticalmente como si no existiera el flotador.

Eso significa que los elementos con display: block que no están colocados ignoran el flotador.

Sin embargo, los cuadros de línea creados junto al flotador se acortan para dejar espacio para el margen del flotador.

Eso significa que los elementos en línea fluyen alrededor de los flotadores. Es por eso que su <span> y el texto dentro de <p> fluye alrededor de div.left, aunque <p> y div.right no.

El cuadro de borde de una mesa, un elemento reemplazado a nivel de bloque, o un elemento en el flujo normal que establece un nuevo contexto de formato de bloque (tal como un elemento con 'overflow' que no sea 'visible') debe no superponga ningún flotante en el mismo contexto de formato de bloque como el elemento mismo. Si es necesario, las implementaciones deben borrar dicho elemento colocándolo debajo de cualquier flotador anterior, pero puede colocarlo adyacente a dichos flotadores si hay suficiente espacio.

Y, eso - obtuso como es - es la respuesta a su problema. Debe insertar un "nuevo block formatting context".

flotadores, absolutamente elementos, Inline-bloques, células de mesa, manteles, subtítulos, y elementos con 'overflow' distintos de 'visible' posicionado (excepto cuando ese valor se ha propagado a la ventana gráfica) establecer nuevo bloque contextos de formateo.

La forma más fácil de éstos para usted es 1:

div.right { overflow: auto; } 

Tenga en cuenta que es probable que también desea 1:

div.comment { overflow: auto; } 

para solucionar un problema relacionado, pero diferente. Si su contenido <p> es más corto que su imagen, el div.left flotante no ampliará la altura de div.comment. Añadiendo overflow: auto; que tiene en el Complicated Cases porción bien llamado de la especificación:

Si el [a nivel de bloque, los elementos no reemplazados en flujo normal cuando 'desbordamiento' no computa a 'visible'] elemento tiene ningún flotante descendientes cuyo borde margen inferior está por debajo de la parte inferior, a continuación, la altura se incrementa para incluir esos bordes

lo que básicamente dice que sólo flotadores ampliar overflow <> visible elementos que contienen.

1overflow: hidden; también funcionaría, pero recortaría el contenido en lugar de arrojar barras de desplazamiento si fuera necesario.