<div class="HeaderLink" id="Home">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MDB1</title>
<link rel="stylesheet" type="text/css" href="Index.css" />
</head>
<body id="HeaderFive">
<div class="HeadPanelElement" lang="en" id="HeadPanel"> <a href="Blog" id="HeaderOne" title="Blog link" target="_self" class="HeadPanelElement">Blog</a>
<a href="Videos" id="HeaderTwo" title="Video's link" target="_self" class="HeadPanelElement">Videos</a>
<a href="Okay" id="HeaderThree" title="Homepage link" target="_self" class="HeadPanelElement">Home</a>
<a href="Contact" id="HeaderFour" title="Contact link" target="_self" class="HeadPanelElement">Contact</a>
<a href="About MDB1" id="HeaderFive" title="About MDB1 link" target="_self" class="HeadPanelElement">About MDB1</a> </div>
</body>
</html>
</div>
@charset "utf-8";
/* CSS Document */
.HeadPanelElement{
position: absolute;
width: 10%;
left: -10%;
}
#HeadPanel{
left: 15%;
width: 100%;
height: 100%;
font-family: Georgia, "Times New Roman", Times, serif;
border: dashed;
border-color: #C00;
border-width: 2px;
font-size: 1em;
Intentions are for the page to layout like this 
Why aren't the position attributes working?
quick to do ...
#HeadPanel
{
display: inline;
width: 100%;
}
.HeadPanelElement
{
width: 10%;
/* or
padding: 10px; */
}
the real factor here is the display: inline; which will layout the div in a side by side fashion.
You are using 'left:' but you didn't include 'position:absolute'? Try that maybe it might help.
position: absolute; will help you get that interesting layout.
For declarations like left and top to make any sense, you need to apply them to positioned elements:
#foo {
position:absolute;
top:10%;
left:25%;
}
Your elements don't appear to have be positioned as absolute or relative.
There are many other problems with your markup as well that will cause many, many problems. All of your markup should go within the body tag:
<!DOCTYPE html>
<html>
<head>
<title>Foo Example</title>
<style type="text/css">
#foo {
position:absolute;
top:10%; left:10%;
background:yellow;
padding:10px 20px;
border:1px solid #000;
color:#000;
width:30%
}
</style>
</head>
<body>
<!-- all markup goes here -->
<div id="foo">Hello World</div>
<!-- all markup goes here -->
</body>
</html>
Online Demo: http://jsbin.com/efukol/edit
There are a few things going on here:
The A element is inline, and things will sit right next to each other, like BlogVideosHomeContactAbout MDB1, as I am sure you have already seen.
This LOOKS like a list or menu, so use the appropriate markup. List markup would be best, or if you want to try HTML5, there is already the NAV element with is specifically for that purpose.
I notice that you are not using URLs in the a elements. It is better to use something which will not generate a 404 on the server.
Why are you bothering with target="_self" unless you are using frames, and if that is the case, please Google for Frames are Evil. If not, then A) _self is redundant, B) if you are using a Strict doctype, the target attribute is deprecated for accessibility reasons.
Naming your CSS file index.css might get you in trouble if the server is configured to use index. with ANY suffix to as the default page. Better would be something like style.css.
Now to get these things going across, you can go a few ways:
/* CSS using line list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:inline; padding:.25em 1em .25em 1em}
/* CSS using floats list markup */
#HeadPanel ul {list-style-type:none;}
#HeadPanel ul li {display:block;float:left;margin: 0 .1em 0 .1em;padding:.25em;}
#HeadPanel ul li a {display:block; /*what ever else you want to do */}
