Setting Inner Div width's percentage of parent

Question

I have 2 parent div's. (parent-left and parent-right). Parent left is 50px and parent right takes up remaining screen width, so I set it to 100%.

I have 2 child/inner divs within parent-right. I need it to take 85% and 15% of the parent-right's width but it calculates percentage based on screen width. What am I doing wrong?

Code below:

<div class="row clearfix">

<div id='parent-left' style="width:50px;float:left;background-color:blue;"><span> parent-left </span>
</div>

<div id='parent-right' style="width:100%;">
  <div id='inner-left' style="width:85%;float:left;background-color:green;"><span> inner1</span></div>
  <div id='parent-right' style="width:15%;float:left;background-color:gray"><span> inner2</span></div>
</div>


</div>

Answer 1

Do not set a width for the #parent-right element, instead set a left-margin equal to the width of the #parent-left element.

<div id='parent-right' style="margin-left:50px;">

Demo at http://jsfiddle.net/gaby/5J38g/