CODEWITHSUNDEEP
htmlcss
FBwall
FBwall

Reputation: 1653

fluid div width

<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/

Upvotes: 0

Views: 1636

Answers (4)

skube
skube

Reputation: 6175

For cases like these I like to use Nicole Sullivan's media object abstraction. Here's a fiddle (for reference).

HTML:

<div class="media">
  <a href="#" class="img"><img src="http://placehold.it/100" alt="" /></a>
  <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;}

Upvotes: 0

Stephen P
Stephen P

Reputation: 14800

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.

Upvotes: 0

Will
Will

Reputation: 20235

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;
}

Upvotes: 1

Robo
Robo

Reputation: 45

.postbox { width:100% }

This will make the div the same width as the container

Upvotes: 2

Related Questions