css div positioning question

Question

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 :)

Answer 1

Set your height on your container div to 100% might help. The other thing you can try is setting the overflow property on your container div. Overflow: hidden or overflow: auto both will make your container div 'wrap' your other divs better at times.

Keep in mind your mileage will vary between browsers.

Answer 2

The reason for the gap is relative positioning does not remove the space originally created for that element even though you move it. Try changing it to 'absolute' and see if that does what you want.

Answer 3

Try changing your CSS to

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

}

Answer 4

I suggest different approach, absolutly position your image and then push the content down with top margin (or padding if you need the background) on container.

div#container {
  width: 780px;
  margin-top:106px;
}
div#photos {
  width: 780px;
  height: 300px;
  position:absolute;
  top:0;
  z-index:50;
}
div#content {
  position: relative;
  width: 780px;
  z-index:100;
}

Answer 5

Instead of using position: relative and setting top, you can achieve the same effect without the space by setting a negative margin-top:

div#content {
  margin-top: -106px;
  width: 780px;
}