Hi all, I have three divs with the following css:

div#container {
  width: 780px;
}
div#photos {
  width: 780px;
  height: 300px;
}
div#content {
  position: relative;
  top: -106px;
  width: 780px;
}


<div id="container">
  <div id="photos">photos are here</div>
  <div id="content">content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer content goes here, but sits slightly on top of the photos layer</div>
</div>

My problem is that because I've set the content layer to be top:-106px there's a big gap underneith, when I wanted the "container" div to end immediately after the "content" div. I tried setting margin-bottom: -106px on the "container" div but that didn't change the height of the "container" div..

The "content" div will have varied height as it's obviously for text, etc. Is there any way of making this work?

Thanks in advance :)