Why doesn't the wrapper div wrap the one and two divs? (In Firefox browser)
<html>
<head>
<style>
#wrapper {position:relative; background:red; border:solid 1px green;}
#one {position:absolute; top:0; left:10px; width:30%; border:solid 1px blue;}
#two {position:absolute; top:0; right:0; width:30%; border:solid 1px yellow;}
</style>
</head>
<body>
<div id="wrapper">
<div id="one">111</div>
<div id="two">222</div>
</div>
</body>
</html>
Because there is technically no content in the wrapper div. All its elements have been positioned absolutely (relative to the wrapper mind you) so there is no content to get any height from.
You'd get the same effect if you floated both the child divs.
You could try putting overflow: hidden on wrapper, giving wrapper an explicit height or giving it some "real" content.
The reason is you have them positioned absolutely. This takes them out of the flow of the div and as a result there is no div in there to take up space, so the bottom border collapses. This also happens when you float the divs, but when you float their is solution to get the div to wrap
#wrapper {position:relative; background:red; border:solid 1px green;}
#one {float:left; width:30%; border:solid 1px blue;}
#two {float:right; width:30%; border:solid 1px yellow;}
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
<div style="clear:both"></div>
</div>
That should do the trick for you.