Question

So I have a sidebar is left side ( 100px ) and then I have a image on the right side. Is it posible to resize the image depending on size which has left no the right side?

For 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 : So example would be – If my resolution is 1000px then image size width would be 900px. And sidebar would always be on right side and it would be 100px wide.

There is fiddle link – http://jsfiddle.net/qLnZu/4/

Answer 1

Wrap a div around the img tag:

<div id="sidebar">
</div> 
<div id="right">
   <img src="http://lorempixel.com/1000/1000/sports/" alt="Work">
</div>

And in CSS:

#sidebar {
  float: left;
  width: 100px;
  background: red; 
  height: 500px;
}

#right {
  margin-left: 100px; //width of sidebar
}

#right img {
  width: 100%;
}

example:

http://jsfiddle.net/qLnZu/6/