thomasn/both.css

## both.css
body {
  color: #000000;
  background-color: #ffffff;
  font-family: "Tempus Sans", Verdana, Tahoma, Arial, sans-serif;
  font-size: 80%;
  padding: 0;
  margin: 0;
}

a, a:visited {
  color: #9424e6;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: fuchsia;
  background-color: transparent;
}

div#main {
  position: relative;
  width: 80%;
  left: 10%;
  color: #000000;
  background-color: #f0f8ff;
}


div#logo {
  position: absolute;
  width: 200px;
  height: 61px;
  top: 20px;
  right: 50px;
}

div#main h1 {
  margin: 20px 20px 20px 50px;
  padding: 20px;
  font-family: "Tempus Sans", Verdana, sans-serif;
}

div#primary {
  margin: 20px 20px 20px 20px;
  padding: 30px 20px 30px 20px;
  border-style: solid;
  border-width: 1px;
}

div#footer {
  clear: both;
  border-style: solid;
  border-width: 1px;
  margin: 50px 20px 30px 20px;
  padding: 5px 50px 5px 50px;
}

body {
position:relative;
}

div#main h1 {
  display:none;
}

div#banner {
  position: absolute;
  top: 20px;
  height: 292px;
  width: 100%;
}

div#banner p#soundbite {
  font-family: Georgia, Verdana, sans-serif;
  font-size: 250%;
  position: relative;
  left: 350px;
  top: 115px;
}

div#primary {
  border-style: none;
  padding-top: 310px;
}

div#challenge {
  color: #000000;
  background-color: #d8e0ef;
  float: left;
  width: 45%;
  margin: 5px;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
}

div#services {
  color: #000000;
  background-color: #bcd8f9;
  float: right;
  width: 45%;
  margin: 5px;
  padding: 10px;
  border-style: solid;
  border-width: 1px;
}


## index.html
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Be Inspired</title>
    <link rel="stylesheet" href="both.css" type="text/css"/>
  </head>

  <body>

    <div id="main">

      <div id="logo"> </div>
      <h1>The Fall</h1>
      <div id="banner">
        <p id="soundbite">be inspired</p>
      </div>

      <div id="primary">
        <div id="challenge">

          <p>Heads Roll</p>
        </div>

        <div id="services">
          <p><strong>Hip Priest</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
	    incididunt ut labore et dolore magna aliqua.</p>

        </div>
      </div>
     <div id="footer">

        <span id="legal">Copyright © blah...</span>
        <span id="conformance">
           | <a href="http://validator.w3.org/check/referer" title="Check XHTML compliance">xhtml</a> |
          <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check CSS compliance">css</a> | </span>
      </div>

    </div>
  </body>
</html>
	body {
	color: #000000;
	background-color: #ffffff;
	font-family: "Tempus Sans", Verdana, Tahoma, Arial, sans-serif;
	font-size: 80%;
	padding: 0;
	margin: 0;
	}

	a, a:visited {
	color: #9424e6;
	background-color: transparent;
	text-decoration: none;
	}

	a:hover {
	color: fuchsia;
	background-color: transparent;
	}

	div#main {
	position: relative;
	width: 80%;
	left: 10%;
	color: #000000;
	background-color: #f0f8ff;
	}


	div#logo {
	position: absolute;
	width: 200px;
	height: 61px;
	top: 20px;
	right: 50px;
	}

	div#main h1 {
	margin: 20px 20px 20px 50px;
	padding: 20px;
	font-family: "Tempus Sans", Verdana, sans-serif;
	}

	div#primary {
	margin: 20px 20px 20px 20px;
	padding: 30px 20px 30px 20px;
	border-style: solid;
	border-width: 1px;
	}

	div#footer {
	clear: both;
	border-style: solid;
	border-width: 1px;
	margin: 50px 20px 30px 20px;
	padding: 5px 50px 5px 50px;
	}

	body {
	position:relative;
	}

	div#main h1 {
	display:none;
	}

	div#banner {
	position: absolute;
	top: 20px;
	height: 292px;
	width: 100%;
	}

	div#banner p#soundbite {
	font-family: Georgia, Verdana, sans-serif;
	font-size: 250%;
	position: relative;
	left: 350px;
	top: 115px;
	}

	div#primary {
	border-style: none;
	padding-top: 310px;
	}

	div#challenge {
	color: #000000;
	background-color: #d8e0ef;
	float: left;
	width: 45%;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-width: 1px;
	}

	div#services {
	color: #000000;
	background-color: #bcd8f9;
	float: right;
	width: 45%;
	margin: 5px;
	padding: 10px;
	border-style: solid;
	border-width: 1px;
	}
	<?xml version="1.0" encoding="iso-8859-1" ?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Be Inspired</title>
	<link rel="stylesheet" href="both.css" type="text/css"/>
	</head>

	<body>

	<div id="main">

	<div id="logo"> </div>
	<h1>The Fall</h1>
	<div id="banner">
	<p id="soundbite">be inspired</p>
	</div>

	<div id="primary">
	<div id="challenge">

	<p>Heads Roll</p>
	</div>

	<div id="services">
	<p><strong>Hip Priest</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
	incididunt ut labore et dolore magna aliqua.</p>

	</div>
	</div>
	<div id="footer">

	<span id="legal">Copyright © blah...</span>
	<span id="conformance">
	\| <a href="http://validator.w3.org/check/referer" title="Check XHTML compliance">xhtml</a> \|
	<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check CSS compliance">css</a> \| </span>
	</div>

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