Geek Answers Handbook

Div Fill Parent Container

I have a comment similar to what I was mocking below. .avatar and .actions have a static width. .comment no. How should I structure my HTML and CSS so that .text up all the free space as .comment changes its width?

enter image description here

+4
source share
3 answers

psuedo (unverified) 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>
+6
source

EDIT: I think the clairesuzy method is much better. Instead of setting fields, as I did, his method uses overflow:hidden so that the text does not fall on any of the floating elements. This has the advantage that it is not necessary to hardcode the width of the two floats as fields. Adding this method to my toolbar.

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

The violin above shows how I will do it. .avatar float left and .actions right. Give the .text left and right margins equal to the width of .avatar and .actions (this will prevent text from moving inside .text under any of them). The order of everything is very important, so .actions does not appear on a new line in IE7.

+1
source

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

0
source

More articles:


All Articles