I have this wrapping div that has a padding of 40px to push "space" off it's boundaries on it's nested elements.

Immediately inside that element, I have 2 <divs>, the top to have its top "attached" to the top inside of the wrapping div, and the second to have its bottom "attached" to the bottom inside of the wrapping div.

Since the wrapping element is positioned relative, I could position these child divs with 'absolute' and they'd attach just fine, but I'd have to manually define the width of the elements as well as manually re-push them off the wrapping div (since they won't see/respect the 40px padding).

If I position them relative, the first <div> attaches to the top of the inside of the wrapping div just fine but that probably has more to do with document flow. At this point, I am unable to get the next child div to attach itself to the bottom of the wrapping div.

<div id="wrapper">
<div class="attach-me-to-top"><p>Top</p></div>
<div class="attach-me-to-bottom"><p>Bottom</p></div>
</div>

Basically that's the structure. Is there a solution to this or will I need to absolutely position these elements and manually offset them from the parent?