Question

I have a div on my page which will scale in height depending on the amount of content which gets put into it.

I have another div layered behind that div, which will hold all of my background divs. I need to make the background div match the height of the scalable div so that the background divs are positioned correctly according to the content.

These two divs are not connected in anyway, e.g. nested or relative to each other. They are completely separate but I need the background div to match the content div. Something like:

**CSS**
#background_container {
height:"=height of 'content_container'";
}

#content_container {
height:auto;
}

**HTML**
<div id="background_container>
  <div id="background_item></div>
  <div id="background_item2></div>
</div>

<div id="content_container>
  <div id="content_item></div>
  <div id="content_item></div>
  <div id="content_item></div>
</div>

I’m not too sure if this can be achieved with CSS but I’m happy to use jQuery if it can’t.

Can anyone help me?

Answer 1

With jQuery:

$('#background_container').height($('#content_container').height());

http://api.jquery.com/height/