.news-fullstory-comments { max-width: 1210px; margin: 20px auto; color:#000; } .comment-text { display: inline-block; width: 922px; min-height: 80px; margin-top: 12px; float: right; position: relative; border: 1px solid #29cbf6; color:#000; } .row.comment-descr { background: linear-gradient(to top right, #27c9f8, #58ffb9); height: 40px; } .comment-text .nick { display: inline-block; font-size: 14pt; margin-top: 6px; margin-left: 18px; font-family: ProximaBold; float: left; } .comment-text .date { display: inline-block; font-size: 14pt; margin-top: 6px; margin-right: 8px; font-family: ProximaRegular; float: right; } .comment .heart { display: inline-block; font-size: 14pt; margin-top: 6px; margin-right: 8px; float: right; } .comment-text .likes { display: inline-block; font-size: 16pt; margin-top: 3px; margin-right: 10px; font-family: ProximaBold; float: right; } .comment-text .message { display: block; font-family: ProximaRegular; font-size: 14pt; width: 903px; min-height: 68px; float: left; color: #fff; text-align: left; padding: 10px; } .comment-block { display: block; width: 1092px; min-height: 150px; position: relative; margin-top: 10px; } .comment-input { display: block; width: 100%; height: 300px; } .comment-input textarea { display: inline-block; width: 876px; height: 90px; border: 2px solid #58ffb9; letter-spacing: 2px; padding: 8px; font-size: 16pt; background: transparent; font-style: italic; color: white; float: left; resize: none; } .comment-ava-wrapper { display: inline-block; width: 80px; height: 80px; border: 2px solid #58ffb9; position: absolute; border-radius: 50%; float: left; margin-left: -110px; } .comment-ava-wrapper img { width: 67px; height: 67px; margin: 7px; border-radius: 100%; } .news-header { display: block; width: 100%; height: 45px; background: linear-gradient(to right, #3bc8ef, #54fcbd); text-align: center; color: black; font-size: 22pt; line-height: 45px; } 
 <div class="news-fullstory-comments"> <div class="comment-block"> <div class="comment-text"> <div class="comment-ava-wrapper"> </div> <div class="row comment-descr"> <span class="nick">12</span> <span class="likes">11</span> <i class="fa fa-heart heart" aria-hidden="true"></i> <span class="date">111111</span> </div> <div class="row"> <p class="message"> Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс </p> </div> </div> </div> <div class="comment-block"> <div class="comment-text"> <div class="comment-ava-wrapper"> </div> <div class="row comment-descr"> <span class="nick">1111</span> <span class="likes">1126</span> <i class="fa fa-heart heart" aria-hidden="true"></i> <span class="date">1512</span> </div> <div class="row"> <p class="message"> Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс </p> </div> </div> </div> </div> <div class="news-header"> <span>text</span> </div>

Actually, the problem is how to make the height of " <div class="comment-block"> " vary from the amount of text. Ie, so that <div class="news-header"> always under the blocks, regardless of their number (the size of the text in the blocks may be different.)

    3 answers 3

    as an option after each comment-block set

     <div class="clear"></div>

    Where

     .clear{ clear: both; }
    • Inserted, does not work - stoner
    • copied all your layout and styles ... put <div class = "clear"> </ div> over <div class = "news-header"> - and now it doesn’t crawl onto blocks ... you probably didn’t put in there. .. - Boris Runs
    • oops, really. Thank! - stoner
    • not at all. if the answer came up, mark it as correct (check mark to the left of the answer) - Boris Run

    It's very simple, add to the overflow:auto; block overflow:auto; :

     .comment-block { display: block; width: 1092px; min-height: 150px; position: relative; margin-top: 10px; overflow: auto; }

    I recommend using min-height with overflow:auto so that the scroll does not appear.

    This decision is better than the previous one in all senses.

      added styles

       .comment-block:after,.comment-block:before{ clear:both; content: " "; display:table; }

      and working.

       .news-fullstory-comments { max-width: 1210px; margin: 20px auto; color:#000; } .comment-text { display: inline-block; width: 922px; min-height: 80px; margin-top: 12px; float: right; position: relative; border: 1px solid #29cbf6; color:#000; } .row.comment-descr { background: linear-gradient(to top right, #27c9f8, #58ffb9); height: 40px; } .comment-text .nick { display: inline-block; font-size: 14pt; margin-top: 6px; margin-left: 18px; font-family: ProximaBold; float: left; } .comment-text .date { display: inline-block; font-size: 14pt; margin-top: 6px; margin-right: 8px; font-family: ProximaRegular; float: right; } .comment .heart { display: inline-block; font-size: 14pt; margin-top: 6px; margin-right: 8px; float: right; } .comment-text .likes { display: inline-block; font-size: 16pt; margin-top: 3px; margin-right: 10px; font-family: ProximaBold; float: right; } .comment-text .message { display: block; font-family: ProximaRegular; font-size: 14pt; width: 903px; min-height: 68px; float: left; color: #fff; text-align: left; padding: 10px; } .comment-block { display: block; width: 1092px; min-height: 150px; position: relative; margin-top: 10px; } .comment-input { display: block; width: 100%; height: 300px; } .comment-input textarea { display: inline-block; width: 876px; height: 90px; border: 2px solid #58ffb9; letter-spacing: 2px; padding: 8px; font-size: 16pt; background: transparent; font-style: italic; color: white; float: left; resize: none; } .comment-ava-wrapper { display: inline-block; width: 80px; height: 80px; border: 2px solid #58ffb9; position: absolute; border-radius: 50%; float: left; margin-left: -110px; } .comment-ava-wrapper img { width: 67px; height: 67px; margin: 7px; border-radius: 100%; } .news-header { display: block; width: 100%; height: 45px; background: linear-gradient(to right, #3bc8ef, #54fcbd); text-align: center; color: black; font-size: 22pt; line-height: 45px; } .comment-block:after,.comment-block:before{ clear:both; content: " "; display:table; } 
       <div class="news-fullstory-comments"> <div class="comment-block"> <div class="comment-text"> <div class="comment-ava-wrapper"> </div> <div class="row comment-descr"> <span class="nick">12</span> <span class="likes">11</span> <i class="fa fa-heart heart" aria-hidden="true"></i> <span class="date">111111</span> </div> <div class="row"> <p class="message"> Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс </p> </div> </div> </div> <div class="comment-block"> <div class="comment-text"> <div class="comment-ava-wrapper"> </div> <div class="row comment-descr"> <span class="nick">1111</span> <span class="likes">1126</span> <i class="fa fa-heart heart" aria-hidden="true"></i> <span class="date">1512</span> </div> <div class="row"> <p class="message"> Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс Тееектстстстс </p> </div> </div> </div> </div> <div class="news-header"> <span>text</span> </div>