Saving the icons at the bottom of the message with dynamic text in the field

Question

So, I have a field that contains text content. What happens if the content is “full”, the window gets larger, but the icons exit the window. What I want to do is keep them in a safe place. This is what i see

Comment, deletion and views aside. And here is what I want it to look even when there is more content

Here is the CSS for the field

.main-content{
    margin-top: 20px;
    width: 100%;
    min-height: 100px;
    background: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}

And badges

.fa-comment {
    float: right;
    margin-top: 67px;
    margin-right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #69f;
}
.likes{
    padding-left: 20px;
}
.fa-heart-o{    
    transition: 0.5s;
    margin-top: 60px;
    color: #FF6699;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.fa-heart{  
    transition: 0.5s;
    margin-top: 60px;
    color: #FF6699;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;
}

.fa-trash-o {   
transition: 0.5s;
    margin-top: 67px;
    color: #ABA9A9;
    font-size: 24px;
    float: right;
    margin-right: 15px;
    cursor: pointer;

}
.icons{
    float: right;
    margin-right: 0%;
    margin-top: 1%;
}

I'm not sure I will do this using CSS or JS, but any help would be great.

Answer 1

You can add clearfix after the comment block. For instance:

<div class="main-content">
... 
Your images and text
...
<div class="clearBoth"></div>
</div>


<style>
.clearBoth{
 clear:both;
}
</style>

: jsfiddle

Answer 2

, .

: http://jsfiddle.net/Y6HSB/17/

, DOM .

HTML:

<div class="comment">
  <div class="comment-content">
    <div class="image-holder">
      <img src="">
    </div>
    <p>The comment text would go here. It could be really short or really long and it won't matter because this is ambiguous to size. It will resize automatically and clear the space below it because that how this works when you keep your structures simple and float elements where needed while providing a clearfix to push things down when needed.</p>
  </div>
  <div class="comment-actions">
      <a href class="likes">0 Likes</a>
      <a href class="comment"><span class="fa fa-comment">comment</span></a>
    <a href class="delete"><span class="fa fa-trash-o">delete</span></a>
  </div>
</div>

DOM, , , .

CSS: ( SCSS )

body {
    background: #888;
}

.comment {
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    .comment-content {
        margin-bottom: 10px;
        .image-holder {
            float: left;
            width: 60px;
            height: 60px;
            border: 1px solid #ccc;
            margin-right: 10px;
        }
    }
    .comment-content:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }

    .comment-actions {
        text-align: right;
        a {
            display: inline-block;
            // you'd want to tweak the styles here. but it should not require much.
        }
    }
}

, , , - .

!