Hello everyone, did a comment system, and "stuck" with this problem alt text

When one comment is good, but when I add the second and third, they move out ... (help now I have been suffering for an hour Here is the html code:

<div class = "comments span8"> <div class = "comment"> <div class = "comment_foto"> <a href = ""><img src = "https://lh4.googleusercontent.com/-GtNAeoTiDhc/AAAAAAAAAAI/AAAAAAAAAAA/yhGEmfrFDrA/s48-ck/photo.jpg"></a> </div> <div class = "span7"> <div class = "comment_info"> <a href = "">АлСксСй Бкляр</a> <span><a href = "">3 Π΄ 19 Ρ‡ Π½Π°Π·Π°Π΄</a></span> </div> <div class = "comment_text"> <p> Π”Π°Π»Π΅Π΅ я ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ нСсколько рСсурсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ online Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ html Π½Π° основС ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π”Π°Π»Π΅Π΅ я ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ нСсколько рСсурсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ online Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ html Π½Π° основС ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π”Π°Π»Π΅Π΅ я ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ нСсколько рСсурсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ online Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ html Π½Π° основС ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Π”Π°Π»Π΅Π΅ я ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ нСсколько рСсурсов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ online Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‚ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ html Π½Π° основС ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°.</p> </div> <div class = "comment_bottom"> <span><a href = "">ΠžΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ</a></span> </div> </div> </div>

Here is the CSS:

  .comment { margin-bottom: 20px; } .comment_foto{ float: left; margin-right: -15px; } .comment_info a{ font-size: 15px; color:#488EC6; font-weight: bold; } .comment_info span a{ color:#9E9E9E; margin-left: 10px; font-size: 13px; } .comment_info span a:hover { color:#4D91C8; } .comment_text { font-size: 13px; } .comment_bottom span a{ color:#9E9E9E; } .comment_bottom span a:hover{ color:#4D91C8; font-weight: bold; }

    1 answer 1

    Use the class .clearfix for .comment, most likely the problem is due to the fact that you do not reset the float: left;

    Here is the class itself:

     .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } .clearfix:after { content: ""; display: table; clear: both; }
    • .clearfix I have in the bootstrap and so, but something did not think to use it, thanks !!! - Pavel Dura