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

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

is there way position parent , kid element next each other (as if weren't parent , kid , floating left) without using position:absolute on kid element? both parent , kid should have dynamic width relative 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 grandparent */ height: 100%; background-color:red; } #child { width: 90%; /* relative grandparent */ height: 100%; background-color:green; }

i don't want utilize jquery. javascript ok though. in end should if parent , kid both kid "grandparent" element , floating left.

thanks in advance!

so did using css , attached fiddle. basically, made #child element 900% of it's parent , gave margin-left of width of parent, didn't overlap. hope helps!

html css position