Dynamically Switch The Fixed Height Of A Parent Div Between Two

I am calling this javascript function:

Inside a nested div so that when a hyperlink is clicked it will show one element and hide the other like this snippet:

The functions works perfectly to expand one div element at a time inside the larger div container. The problem is that when I expand either of the elements by clicking the hyperlink...The larger div container(red gradient square) pushes everything past the background (solid grey square) and screws up the look of the entire page because the div, (which is a few levels up), containing the background is a fixed width, (as a percentage width would not work). I know the exact two widths the background would need to expand to dynamically as a result of the hyperlink being click by a user, but I do not have any idea how to do this from within the aforementioned javascript function I posted. Does anyone have any idea or help for me? It is very confusing as the div I need to resize is a full 3 levels outside of the function call I am working with. As an example the function call is happening in the last div of this flow:

And results in either a div#First or div#Second being generated inside the div#bio. I need to resize the div#greySquareH height property.

Btw the url to the page I am working on is Here. If you want to see any of the other code in the page it is there or I can upload it including the css if I haven't given enough info what I'm working on.