This arrangement causes the child divs to line up vertically.
HTML
<div class="outer">
(other content goes here)
<div class="containingBox">
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>
</div>
</div>
CSS
.outer
{
position: relative;
top: 0px;
left: 0px;
width: 700px;
margin-top: 15px;
}
.containingBox
{
position: relative;
top: 0px;
left: 0px;
width: 700px;
height: 300px;
background-color: red;
}
.container
{
position: absolute;
}
.child
{
position: relative;
width: 700px;
height: 300px;
margin-right: 25px;
float: left;
background-color: blue;
}
(I have removed the overflow-x: hidden on both containingBox and outer so you can see the issue.)
EDIT: The layout functions properly until a parent container is added outside of the existing structure!!
This setup works: http://jsfiddle.net/seB5F
This configuration does not work: http://jsfiddle.net/seB5F/1014/