css - Creating percentage heights for divs in a 100% width container -

i creating website consists of image areas links. want image width: 100%, , height auto, in order keep aspect ratio.

all of places in image want links scaled well, thinking of creating divs percentage margins create scale-able areas. working width of divs,

the problem height elements not controlled , don't seem honor height set.

does have idea of how make work, or suggestion better way accomplish this?

thanks!

there couple ways can think of. 1 wouldn't need additional markup put position: relative on #bigbox. can position small boxes absolutely top , bottom values rather height value.

css:

img{   width: 100%;   z-index: -1;     }  div#bigbox {   width: 100%;   margin: 0 auto;   margin-left: 0;   position: relative; }  div#smallbox1 {   left: 11%;   top: 20%;   width: 20%;   bottom: 23%;   position:absolute;   background-color: red;   }  div#smallbox2 {   margin-left: 40%;   top: 20%;   width:20%;   bottom: 23%;   position: absolute;   background-color: green; } 

update jsbin here: jsbin.com/oqojef/2/edit