I am working on creating a screen layout where 80% of it will be occupied by an image while the remaining 20% will be taken up by a separate div. The image is set to scale its width proportionally to its height, filling the 80% section. However, I want the bottom 20% div to automatically inherit the scaled width of the image as well. Below is my CSS code:
<style type="text/css">
#background {
width: 100%;
height: 100%;
position: relative;
overflow:hidden;
left: 0px;
top: 0px;
z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
max-width:100%;
height:80%;
}
</style>
Here is the corresponding HTML:
<div id="background" >
<img id="status_bg" src="online_pend_off.jpg" class="stretch">
</div>
<div id="twenty_per" style="background-color:blue">
</div>
If you have any suggestions on how I can make the second div (twenty_per) inherit the same width as the status_bg image, please share them. Thank you!