Hello All, The website I'm currently putting together requires a liquid layout where the left navigation menu stays at a fixed width and the head and content expands as the page is resized.

I have the basic structure of the page and it seems to be working for the most part. I just cannot figure out why i cannot apply a top margin to my content div to separate it from the header by some whitespace. I can apply a top margin to the div leftcolumn just fine. When inspected with firebug it seems the <h2> inside the content div extends to the top of the page.

Any help would be greatly appreciated, my first time working with a flexible layout like this. Also - any tips on getting the corners on the flexible header like those in the side columns would be terrific. Here is the code:

HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page</title>
<link href="template1.css" rel="stylesheet" type="text/css" />
<link href="structure1.css" rel="stylesheet" type="text/css" />


</head>

<body>
<!--Header for Class Name, Email-->
<div class="pagemargins">
<div class="head">
<div class="controls">
<a href="#">Select Style </a>
</div>
<div class="headimg">
<img src="images/Person.jpg" alt="Image" height="131" />
</div>
<h1>Glorious Heading</h1>
<h2>Your Name</h2>
</div>



<div class="leftcolumn">
<div id="nav">
<h2>Navigation <span class="controls"><a href="#">Edit</a></span></h2>
<ul class="nav">
<li id="active"><a href="#">Home</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Annoucements</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Item Eight</a></li>
<li><a href="#">Item Nine</a></li>
</ul>
</div>

<div id="edit">
<h2>Edit Tools <span class="controls"><a href="#">Edit</a></span></h2>
<ul class="edit">
<li><a href="#">Add New Page</a></li>
<li><a href="#">Style Settings</a></li>
<li><a href="#">General Settings</a></li>
<hr/>
<!--Controls Replaced By Images-->
<a href="#">Larger</a> | <a href="#">Smaller</a><br/>
<a href="#">Color:</a> Color<br/>
<a href="#">Background:</a> Color<br/>
</ul>
</div>
</div>

<!--Main Content-->
<div class="content">
<h2>Welcome! <span class="controls"><a href="#">Edit</a>| <a href="#">Remove</a> | <a href="#">Show</a></span></h2>
<div class="welcomecontent">
<p>Lorem ipsum pri erat noluisse disputationi cu, eam eu erant elitr, in facilis detraxit nam. In posse deserunt sit, ad ius virtute probatus consequat, nam at animal detraxit. Vim congue veritus ut, ut vidit accusamus sed, ad nullam omittantur has. In qui aeterno reformidans, graeco euripidis sit ne. Te usu fabellas periculis, ei dicit vidisse sea. Ad mei suas minimum, ea malis dictas est.</p>

<p>Pro iusto adipiscing et, pri homero possit no. Vis minim salutatus ei, postea nominavi at mei, cu pro deleniti delectus. Est debitis laboramus ut, iuvaret vivendo ut eos, mea cu iisque omittantur. Sit ea quidam sanctus officiis, cu sed posse idque. Ut oblique aliquyam persecuti duo, eam te mazim delectus perfecto. Ex fabellas vivendum nam.</p>

<p>Pro ut eripuit salutatus, ut quis nominati pro. Pro nullam electram constituam ad, ad duis menandri partiendo sed. Euismod maiorum deserunt ei qui, cibo velit eum cu. Duis detracto eam id, assum lobortis ius ea, te tibique prodesset ius. Quis mediocritatem et nec, eum an omnes tincidunt persecuti.</p>

<p>Graece quaerendum contentiones sed ad, graece vituperatoribus ignota his eu, cum cu discere placerat. Ne liber nostrud mel. In veritus fierent sea. Pri oratio expetendis at. An noster nostrum dissentiunt mei, ius esse eruditi contentiones id.</p>
</div>
</div>

</div>
</body>
</html>
structure1.css:
Code:
@charset "utf-8";
* {
margin:0;
padding:0;
}
div.pagemargins
{
	margin:0 10px 10px 0;
}
body {
width:auto;
min-width:780px;
max-width:80em;

}

div.content {
width:auto;
margin:0 0 0 200px;
}

span.controls {
font-size:70%;
}

div.controls {
float:right;
font-size:80%;
}

div.welcomecontent {
height:100%;
}

div.leftcolumn {
float:left;
width:196px;
}

div.headtext,div.headimg {
float:left;
}

div.head {
float:left;
height:130px;
width:100%;
margin:0 0 10px 0;

}

div.leftcolumn h2,div.content h2 {
line-height:35px;
}
template1.css
Code:
@charset "utf-8";

body {
background-color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

div.head {
background-color:#99F;
}

ul.nav li {
list-style-image:url(images/flag.gif);
margin:5px 0;
}

div#edit {
margin:20px 0 0;
}

ul.edit li {
list-style-image:url(images/plus.gif);
margin:5px 0;
}

div.welcomecontent {
border-color:#99f;
border-style:solid;
border-top-width:3px;
margin-top:-3px;
padding:5px;
}

div.leftcolumn h2 {
background-image:url(images/lefttab.gif);
background-position:center;
background-repeat:no-repeat;
color:#FFF;
font-size:12pt;
text-align:left;
text-indent:15px;
width:196px;
}

div.content h2 {
	background-color:#99f;
	color:#FFF;
	font-size:14pt;
	text-align:left;
	text-indent:15px;
}

.head h1,.head h2 {
color:#FFF;
}

ul.nav,ul.edit {
border-color:#99f;
border-style:solid;
border-top-width:3px;
list-style:disc;
list-style-position:inside;
margin-top:-3px;
padding:5px;
}
Thanks!