I'm trying to create a triple border using CSS. Right now what I've got is two borders but the second border doesn't go around the element(div.container#main) completely.
Essentially the problem is you're using position absolute and calculating things from the wrong elements.
When something is absolutely positioned in only gains height when that height is specified or when the element has content. A workaround for that in this case is to assign both a top and bottom value, which will essentially make the element expand. You forgot the bottom value. Adding it gives us this:
However you'll notice now the element goes to the bottom of the view port. This is because without a positioned parent (relative, absolute, static) it defaults to the top level element as the context for positioning.
To get around this we can either add an extra wrapper element and give it position relative, or we can move our border styles onto your div.row; Either way the technique is the same, just depends on whether you can add a another wrapper or whether the div.row will work for your situation. So that gives this:
Now you can see we actually have the inner border working in concert with the dimensions of the box. But now our position is off. This is because instead of calculating our offset from the outer element #main we are working from the inside out so we need to invert our measurements:
OK, now we are back to having the order on the outer edge of our original box, so we just need to bring it in to the middle of our outer border, so we just change the measurement to about half, finally giving us what we want: