Struggling to align a div using Javascript on my professor's website to match the spacing of the rest of the site. Despite attempts at adjusting margins and following suggestions from other Stackoverflow.com threads (e.g. CSS: Center block but left align contents), nothing seems to be working.
The goal is to position the links higher up on the page, similar to the layout of other pages.
This is what I currently have:
<!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" />
<link rel="stylesheet" type="text/css" href="ecl.css" />
<title>Sarah Lawrence College: Research</title>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
</head>
<body>
<div id="header"><img src="images/celab-header-reduced.jpg" /></div>
<div id="navigation">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="teaching.html">Teaching</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="members.html">Lab Members</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="researchcontent">
<ul>
<li>
<div class="showhide"><a href="javascript:hideshow(document.getElementById('ptsd'))">
<h1>Posttraumatic Stress Disorder (PTSD)</h1>
</a></div>
<div id="ptsd">We are currently conducting a series of studies using cognitive and brain imaging techniques to explore the impact of combat trauma on memory and emotion. These studies examine how one’s self-perception affects various processes associated with recovering from combat trauma.</div>
</li>
...
</ul>
</div>
</body>
</html>
CSS used:
/* Structure */
div#content {
width:600px;
float:center;
margin:auto;
}
div#navigation {
float:left;
margin:auto auto;
}
...