Parent and child div next to each other without using position:absolute

Question

Is there a way to position a parent and a child element next to each other (as if they weren't parent and child and floating left) without using position:absolute on the child element? Both parent and child should have dynamic width relative to the grandparent element.

HTML

<div id="grandparent">
   <div id="parent">
      <div id="child">
      </div>
   </div>
</div>

CSS

#grandparent {
width: 500px;
height: 250px;
border:1px solid #000;
}
#parent {
width: 10%; /* relative to grandparent */
height: 100%;
background-color:red;
}
#child {
width: 90%; /* relative to grandparent */
height: 100%;
background-color:green;
}

I don't want to use jquery. JavaScript would be ok though. In the end it should look as if parent and child were both child to the "grandparent" element and floating left.

Thanks in advance!

Answer 1

So I did this using css and I attached a fiddle. Basically, I made the #child element 900% of it's parent and also gave it a margin-left of the width of the parent, so they didn't overlap. Hope this helps!