Question

HTML

<div class="cont">
<div class="size" id="size1"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>

<div class="cont">
<div class="size" id="size2"></div>
<div class="text">Here is some textHere is some text Here is some text</div>
</div>​

CSS

.size {
    background-color: red;
    height: 100px;
    width: 100px;
}
#size2 {
    width: 200px;
}
.cont {
    padding: 10px;
    float: left;
}​

I need div.cont‘s widths to be the width of their contained div.size (in my actual example div.size is an image and its with will vary in each instance).

This isnt happening as div.text takes up more space than its container, how can I stop this and make the text wrap?

JS Fiddle

Answer 1

Deleted all the previous stuff as I have (after doing some digging) found an exact duplicate with working solution.

My answer was also incorrect (as the op then specified the image MUST be allowed to be variable)

The answer is found on this jsfiddle and is an exact duplicate of css – shrink a parent div to fit one child's width and constrain the width of the other child

//html

<div id="container">
    <div id="child1"><img src="//www.google.com/logos/2012/Teachers_Day_Alt-2012-hp.jpg" width="300" height="116"></div>
    <div id="child2">Lorem ipsum dolor sit amet.</div>
</div>
<br/>
<a id="longtext" href="#">lengthen/shorten text</a>

//css

#container{border:1px solid #f00;display:inline-block;margin:10px; display: table;}
#child1{border:1px solid #0f0;margin:10px; display: table-row; width: 1px;}
#child2{border:1px solid #00f;margin:10px; display: table-cell; width: 1px;}
img {border:1px solid #000;}

and basically it works using display:table-* (have a good read up)