Floater Div

Floater Div
Child Element
Child Element
Container outlined in yellow
html:
<div id="parent">
  <div id="floater"></div>
  <div id="container">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
	
css:
#parent {
  height: 300px;
}

.child {
  height: 100px;
}

#floater {
  float: left;
  height: 50%;
  width: 100%;
}

#container {
  width: 300px;
  margin: 0 auto;
  clear: both;
}


Javascript:
onload=function() {

  var container = document.getElementById("container");
  var divWidth = container.offsetWidth;
  var divHeight = container.offsetHeight;
	
  var floater = document.getElementById("floater");
  floater.style.marginBottom = -divHeight / 2 + "px";

}
	

This method adds an extra div before the container, which is floated an amount equal to half the height of the parent. The container element clears the floater div, and then a negative bottom margin is set on the floated div equal to half the height of the container.

Javascript is used to get the height of the container and to set the negative bottom margin on the floater div.

Note: This method assumes the height of the parent element and each child element is fixed and known. However, the number of child elements is unknown and the total height of child elements is dynamic.

Additional styles not related to the above have been used to make this demo more presentable.