Alright, there are quite a few things to cover so I'll try to keep this short.
Just starting with your code itself, the CSS is kind of broken. There were a few syntax issues such as an extra '{' near the bottom as well as the closing parenthasis ')' near the end as well. I should also note, on a logical note, you don't need to apply a margin to an element if its position is absolute. The margin isn't really used at that point because the element will be placed in an exact location regardless of other elements. Margins are typically used for spacing between elements that are static or relative. Some other things to note would be in your padding, you don't have to repeat the number 4 times. Since it's the same for all 4 sides, entering 1 value will apply it to the top, right, bottom and left.
Now for the answers. What you are wanting is called responsive design. Essentially it can be summed up as using CSS to adjust your page based on the user's window size/resolution. A few notable things to do for responsive design would be use percent based values, utilize the max-width and max-height properties and when necessary use media queries. Generally you don't want to use absolute positioning given the nature of how it works. For your case, I'd say you would firstly use 2 container divs to act as columns. So your HTML ends up looking like this:
<div class="styleColumn">
<div id="biography">
<h1><u>Michael Smith's Biography</u></h1>
</div>
</div>
<div class="styleColumn">
<div id="parents">
<h2><u>A Little Bit About Myself</u></h2>
<p>Random typing I am just trying to create a lame bio for myself so something can be here. None of this stuff I am writing here makes sense so pleas ignore all of this gibberish. Here is more blah blah blah blah blah blah blah blah blah blah blah blah</p>
<p>My father is 58 years old and has <span style="color: yellow;">yellow</span> hair and <span style="color: gray;">gray</span> eyes.
My mother is 53 years old and has <span style="color: brown;">brown</span> hair and <span style="color: blue;">blue</span> eyes.</p>
</div>
<div id="interests">
<h3><u>Some of My Interests & Achievements</u></h3>
<p><a href="football/vikings.html">Minnesota Vikings</a></p>
<p><a href="outdoors/fishing.html">Fishing</a></p>
<p><a href="technology/certification.html">My Certifications</a></p>
</div>
</div>
So essentially I've split your blocks in to the two columns treating it more like a table (but not really) rather than trying to position them exactly with absolute. The rest is all CSS and it will be where you control how this page will behave at different resolutions. I'd encourage that you read more about responsive design so you can get a better understanding of all the ways you can use it. For now your CSS would look something like:
body {
background: #CCF;
color: #309;
font-family: Helvetica;
margin: 0;
padding: 0;
}
.styleColumn {
vertical-align: top;
width: 600px;
max-width: 100%;
margin: 0;
display: inline-block;
zoom: 1;
*display: inline;
}
#biography {
min-height: 445px;
margin: 0 0 16px;
padding: 20px;
border: 4px solid #309;
}
#parents {
margin: 0 0 16px;
padding: 20px;
border: 4px solid #309;
}
#interests {
margin: 0 0 16px;
padding: 20px;
border: 4px solid #309;
}
#interests a:link {
color: #007E7E;
}
#interests a:visited {
color: #333;
}
#interests a:hover {
background: #F88396;
color: #0D5353;
}
I'd like to note that normally I would not use the 'min-height' property like I have, but for presentation purposes I was trying to match the 'appearance' you had initially. Realistically you would remove that and just let the box adjust heights as you added content. Also, this is a pretty basic version of what you probably would want. Once the window or resolution becomes to small, the two columns will break into 1, allowing everything to fit onto the page better. And using the max-width property we can prevent the boxes from becoming too wide if the window becomes too small (which is ideal for mobile devices).
