Question

I have a comment something like what I have mocked up below. .avatar & .actions have a static width. .comment does not. How should I structure my HTML & CSS so that .text will take up all of the available space as .comment changes it’s width?

Answer 1

psuedo (untested) code

<div class="comment">
    <div class="avatar"></div>
    <div class="actions"></div>
    <div class="text"></div>
</div>

CSS:

.avatar {float: left;}
.actions {float: right;}
.comment, .text {overflow: hidden;}

Working Example:

.avatar {
   float: left; 
   margin-right: 10px; 
   width: 100px; 
   height: 100px; 
   background: #fff;
}
.actions {
   float: right; 
   margin-left: 10px; 
   width: 30px; 
   height: 130px; 
   background: #fff;
}

.comment, .text {
   overflow: hidden;
}
.comment {
   background: #eee; 
   width: 600px; 
   padding: 10px;
}
.text {
   background: #fff;
}

HTML:

<div class="comment">
    <div class="avatar">..</div>
    <div class="actions">..</div>
    <div class="text">Your comment goes here<br>more text<br>more text</div>
</div>