fluid div width - html

Question

<div id="post">
<img src="image.png"/>
<div class="postbox">
some content here
</div>
</div>
How do i make `.postbox' expand it's width to the max possible with with respect to the width of the image or without the image?
#post{
width:569px;
overflow:hidden
}
#post img, #post .postbox{
float:left
}
I tried width:100% to .postbox but it's taking up the whole width.
http://jsfiddle.net/FTY4k/

Answer 1

.postbox { width:100% }
This will make the div the same width as the container

Answer 2

If it doesn't mess up your layout, you could float the image, but not the div.
#post{
width:569px;
overflow:hidden;
}
#post img{
float:left;
}

Answer 3

Using CSS float pulls the element out of the flow. In a sense, your img and div class="postbox" a no longer contained in the div id="post" even though it is still their parent in the DOM tree.
You can try setting those to inline-block instead of using float, or float them together withing an inner div and have a clear, all contained within id="post"
More details depends somewhat on your bigger picture of what you're trying to do in the layout.

Answer 4

For cases like these I like to use Nicole Sullivan's media object abstraction. Here's a fiddle (for reference).
HTML:
<div class="media">
<img src="http://placehold.it/100" alt="" />
<div class="bd">lorem dolor...</div>
</div>
CSS:
.media {margin:10px;}
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;}
.media .img {float:left; margin-right: 10px;}
.media .img img {display:block;}
.media .imgExt {float:right; margin-left: 10px;}