I paid someone a bunch of money to do my wife's at-home business (jewelry) website and I think the results are disappointing. So, instead I am learning html and css and designing it myself.

First, I know how I want the site to look like. The home page will be a vertically and horizontally centered box taking up a portion of the screen. An example of what I'm trying to achieve is this website (www.mkpeace.com).

I am trying to achieve the same type of white border around the different segments like at the above website.

As you can see with my code posted below, I have floated a left box underneath the headers. I have not created a box to go on the right of the left box yet. Although the right frame will have some images in it on the home page, the interior pages will have an iframe.

I am basically looking for the best way to go about this, any advice is much appreciated. . . . and remember, you are talking to an inexperienced person.

Also, here are some random questions:

1. Should I size things according to percentages or another way?
2. Why do so many people size things in terms of "em" as opposed to px or percentages.
3. How do I size the left box so that it comes down to the footer? Why did it not do so when I sized its height as 100%?
4. Why is there a thin blue line below the footer?
5. Is it true that you can never color margins specifically, but instead it will reflect the background color of its parent container?


here is my code so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="GENERATOR" content="PageBreeze Free HTML Editor (http://www.pagebreeze.com)">
<title>TestA</title>
<style type="text/css">

.centerelement {
position : absolute;
width : 70%;
height : 60%;
left : 15%;
top : 20%;
border:10px solid gray;
border-color: #fff
}

div.header {
padding:0.5em;
color:red;
background-color:#F6F6CC;
clear:left;
}

div.headerA {
padding:0.5em;
color:white;
background-color: #cccc99;
clear:left;
}

div.left
{
float:left;
width:25%;
margin:0;
border-style: solid;
border-top-width: .5em;
border-right-width: .5em;
border-bottom-width: .5em;
border-left-width: 0;
border-color: #ffffff #ffffff #ffffff
padding:1em;
background-color: #ccffff
}

div.footer
{
position: absolute;
bottom: 0px;
width: 100%;
padding:0.5em;
color:red;
background-color:#F6F6CC;
clear: left
}

</head>
</style>
<body bgcolor="#6666cc">
<div class="centerelement">
<div class="header">THIS IS HEADER</div>
<div class="headerA">THIS IS HEADER A</div>
<div class="left">This section will contain various claims and benefits to shoppers, such as referral and other items</div>

<div class="footer">THIS IS FOOTER</div>

</div>
</body>
</html>