Absolute Position Div Not Pushing Other Content Down

Most of my code in a jsFiddle: http://jsfiddle.net/MilkyTech/suxWt/ The content should load on the first page in a white box, with overflowing content pushing the following section

Solution 1:

Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.

Solution 2:

you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:

.page1 {
  background: url('../img/bg.jpg')#131313;
  height: 100%;
  position: relative;
}
.huge-title {
  position: relative;
  top: 20%;
  right: 0;
  left: 0;
  margin: auto;
  height: 100%;
}
#detailsbox {
  top: -4em;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  border: 20px solid white;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  position: relative;
  float: left;
  clear: both;
}

Solution 3:

The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.

Solution 4:

The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two. Refer this answer

Solution 5:

Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.

You may want to check this out.

Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.