My layout includes a sidebar on the left side (100px) and an image on the right side. Is it possible to adjust the size of the image based on the available space to the right?
Here's an example:
<div id="sidebar"></div>
<img src="image" alt="Work">
<style>
#sidebar {
float: left;
width: 100px;
background: red;
height: 500px;
}
img {
float: left;
width: 80%; /* This is not working right */
}
</style>
EDIT : As an illustration, if the resolution is 1000px, the image width would be 900px. The sidebar will always be on the right side and have a width of 100px.
Here is the link to the fiddle: http://jsfiddle.net/qLnZu/4/