float objects goes over another float object

Question

I have a comment section on my site, I made the left side for user info using float left, and the right side with the comment body is float right, now if someone enters a too long of a texts it runs over the other the next comment, how can I make it look better. I add a JSfiddle for example. thanks

https://jsfiddle.net/czz2qwab/8/

html:

 <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b"> try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try</h6>
                        </li>
                    </div>

    <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try</h6>
                        </li>
                    </div>
                  <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try </h6>
                        </li>
                    </div>

    <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try </h6>
                        </li>
                    </div>
        <div class="comment">
                    <div class="left">
                        <li><img src=""></li>
                        <div class="cmnt-gr">
                         <h5> <a class="user" href="">just me</a></h5>

                           <h6 class="time">now</h6>
                        </div></li>
                    </div>
                    <div class="right">
                        <li>
                                <h6 class="comment-b">try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try trytry try try try try try try try try try try try try try try try try try try try try try try try try try try try</h6>
                        </li>
                    </div>

css:

 .left{
        float:left;
        width:40%;
        /*
        background: #333;
        */
       height:60px;
    }
    .right{
        float:right;
        width:60%;
        /*
        height:100px;
        */
        /*
        border-top: 1px solid #e8e8e8;
        */
        vertical-align: text-top;

        height:60px;
    }
    .comment{
        background: #fafafa;
        /*
        overflow-y: scroll;
        */
        font-family: "Roboto", sans-serif;
    position: relative;
        vertical-align: text-top;

    }
    .comment li{
      list-style:none;
    }

Answer 1

cale_b mentioned in a comment that your markup is invalid. He's not wrong. I've cleaned out the extraneous list item tags <li></li>. As cale_b mentioned, those belong as children of either ordered or unordered lists. So I've revised things to do what I think you were hoping to accomplish; which was to associate a user and a date/time to each comment. Your markup was a mess, with none of the <div class="comment"> tags having corresponding closing </div> tags. To get a clear picture of where things are going wrong, it's necessary to first validate your markup.

It's also helpful to understand default values that browsers place on certain elements. Wrapping your content in header tags h5 and h6, without also addressing default margins can have unexpected side-effects. Browsers may place their own default margin and/or padding on certain elements, and you can't expect any consistency. So addressing those defaults in your project CSS will go a long way toward establishing predictable cross-browser consistency. There are many "reset" fixes out there, here's one. This is why your text is appearing middle-aligned, despite your attempts at vertical alignment in the CSS. Using the inspector/DevTools in most modern browsers will help you see where things might be going wrong with unexpected padding/margin/line-height.

Since you defined fixed heights on each floated div, that will naturally limit the amount of comment content each comment can contain without doing something with the overflow. Your example is displaying that overflow, which is superimposed on the comment below when the viewport is sufficiently constricted.

But removing the height definition has unintended side-effects (background color inserted for clarity):

I'm guessing this is why you defined the height property in the first place. This is where clearing floats can help straighten things out. As described in this answer to a similar question, clearing your floats within each .comment container fixes the unexpected content wrapping seen in the screenshot above. You can do this by creating a new div, or by using the ::after pseudo class to insert content that does the clearing for you. I further applied some styles and colors for effect:

As you can see, your comments can now have an arbitrary amount of content. Clearing your floats means you'll no longer have to worry about the content of one .comment container interfering with the content of another.

My jsfiddle revisions: https://jsfiddle.net/afilbert/czz2qwab/9/

Also, a link to a pretty comprehensive article on floats: https://css-tricks.com/all-about-floats/