Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Only let certain inner divs control outer div's width

Only let certain inner divs control outer div's width

Problem

I have the follow html structure:

Some Text
Some Text

the container is float:left. The container will stretch out to the widest div, but what if i only want it to follow block1, and have block2 and block3's text to wrap according to how big the image in block1 is. For my markup right now, if the text is long it will push out the container div as far as the text goes out, but I want the text to only be as wide as the image, almost like an image caption. Any ideas?

Problem courtesy of: anthonypliu

Solution

Make the container display:inline-block; with overflow:auto; so that it automatically stretches to fit the content. Give Block #2 and Block #3 overflow:auto; too so that they stretch to fit their content.

Unfortunately, you need to use JavaScript to get the Width to be the width of the image. See my example below, where I fix it with jQuery.

See: http://jsfiddle.net/TFLMX/2

Solution courtesy of: Nathanael

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Only let certain inner divs control outer div's width

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×