Layered elements in liquid lay-out

[dwlamb_001]

I have a challenge with placing a couple of small elements in a div using a liquid lay-out CSS.

The result I want can be seen here . My desired effect is the e-mail and CV in PDF links to the right of name at the top. However, I do not want them to push the name and text out of center. The lay-out in the example is done in layers using fixed CSS lay-out. I can't achieve the same result in liquid or elastic lay-out.

This is my HTML:

<div id="wrapper"><!-- overall wrapper to use middle of browser for 70% -->
  <div id="header"><!-- bordered white space area for name, links to e-mail and CV in PDF -->
    <div id="pdf">
      <a href="Daniel_Lamb_in_Brief.pdf">CV in PDF</a>
    </div><!-- end of pdf div -->
    <div id="name">
    <h1>
      Daniel Lamb, B.A.
    </h1>
    [continues with appropriates matching tags]

This is the corresponding CSS:

#wrapper{
  width: 70%;
  margin-left: 15%
}
#header{
  width: 100%;
  background-color: white;
  border-style: solid;
  border-color: #352B3F;
  border-width: thick;
  padding-bottom: 1%;
  margin-bottom: .75%;
  padding-right: 0.5%;
  padding-bottom: 2em;
  padding-left:  0.5%;
}
#pdf {
  float: right;
}

I've only included the 'pdf' elements for whatever the solution, I am certain the same concepts will apply to the e-mail icon hyperlink.

The challenge is the placement of either the pdf or e-mail links without interfering with the text in the header block area. Doing a fixed position lay-out, placement was possible using layers (z-index). Trying to apply the same technique now has no effect. If layering is not possible and I need to go with something such as an 85% area for the text and 13% area for the links (leaving 2% as gutter), is there a way to tweak the margins or padding so the centered appearance of the text is as though it is 100% the width of the header area?

Thanks for taking the time to read this and have a Great Day!

Daniel