I have container with a fixed height.
Inside it there are two children: image and text of arbitrary length below it.
I want the text to take the height it needs and the image to auto-adjust to the remaining space.
Here is a start code I have:
<div id="parent">
<div>
<img src="http://placehold.it/250x250&text=2" />
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </div>
</div>
Here is the JavaScript solution, but I'm wondering whether it can be CSS-only.
Update:
bfuoco's solution is very close to what I need, but it doesn't work in Firefox.
Best Answer
I would suggest using the
table
andtable-row
values of thedisplay
property for this.The image-wrapper and text elements are both table rows, and so expand to fill the total area of the table. The image-wrapper is set to height 100%, so it consumes the left over space.
The image element is nested within the image-wrapper and is set to width/height 100%, so it takes on the same dimensions as its parent.
Here is a fiddle: http://jsfiddle.net/8S6Kf/1/
HTML
CSS
Update
This doesn't work on FF/IE. For this particular problem, you can replace the actual image with a div and use the background-image property. Note you also have to make the image a table-cell; or else ie won't render the table.
Here is an example that does not stretch the image.
http://jsfiddle.net/8S6Kf/7/
HTML
CSS
If you want to preserve the dimensions of the image, you can alternatively use these background properties: