I have two DIV layers, one above the other. In the top DIV, there is an image, and in the bottom DIV, there is a block of text. The amount of text in the bottom DIV will change, thus increasing and decreasing the required height. I need to dynamically decrease the height of the image in the top DIV based on how much height is required for the bottom. I have exactly 600px vertical space available. For example: If the bottom DIV requires 200px height, I need for the image to change height to 400px. If the bottom DIV requires 300px height, I need for the image to change height to 300px. I know that I can make the image height 100% of the top DIV, thus allowing it to expand or contract as needed. The issue is that I need for the bottom DIV to be able to expand freely and for the top DIV to react accordingly. In other words, I cannot have either be a fixed height. <div id="topdiv"> <img src="example.png" alt="This image needs a height based on the bottom div" /> </div> <div id="bottomdiv"> This text needs to be able to expand or contract freely </div> Can anyone help?