0

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>
user3658423
  • 1,904
  • 5
  • 29
  • 49

1 Answers1

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/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • awesome your solution works! can you please tell me why the 100% on parent-right would cause issues with child? Just to get a technical understanding.... – user3658423 Jun 24 '14 at 00:31
  • setting 100% to the right does not make it take the remaining of the screen, it makes it take all of the screen. Only its contents are affected by the `#parent-left` element. You can see that if you add a background color to the right div and push the left one down.. ***See http://jsfiddle.net/gaby/v4Jrh/*** – Gabriele Petrioli Jun 24 '14 at 00:38
  • @user3658423 It's generally bad practice to stylize content inline with HTML. You should always try to separate your CSS from your HTML using either external style sheets or ` – Jason Jun 24 '14 at 00:45