CODEWITHSUNDEEP
htmlcss
Kyle Decot
Kyle Decot

Reputation: 20835

Div Fill Parent Container

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?

enter image description here

Upvotes: 4

Views: 4898

Answers (3)

Kirkland
Kirkland

Reputation: 2533

Or you can just use a Flex Box (pure CSS) and write a lot less code.

Upvotes: 0

iamnotoriginal
iamnotoriginal

Reputation: 457

EDIT: I think clairesuzy's method is much better. Instead of setting margins like I did her/his method uses overflow:hidden to make sure text doesn't go below either of the floated elements. This has the advantage of not needing to hard code the widths of the two floats as margins. Adding this method to my toolbox.

http://jsfiddle.net/HggL2/2/

The fiddle above shows you how I would do it. Float .avatar left and .actions right. Give .text left and right margins equal to the widths of .avatar and .actions (this will prevent the text inside of .text from going underneath either of those). The order of everything is important so that .actions doesn't appear on a new line in IE7.

Upvotes: 1

clairesuzy
clairesuzy

Reputation: 27674

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>

Upvotes: 6

Related Questions