So I want to remove the div tag for two pages of my site but I can't figure out how to do so without messing up the layout of my page.

Link to Screenshot

The image on the left is what happens after I delete the div tag and the one on the right is when it is intact.

I don't want that gap between the content area and the header. Also it doesn't do that in dream weaver only in the browsers.

Can anyone help me?

Code with Div

Code:
<head>
<title>Sigma Lambda Sigma</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../Templates/charitable-organization/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #58B0e3;
}
.style1 {color: #FFFFFF}
.style2 {color: #58B0e3}
-->
</style></head>
<body>
<div id="container">
  <div id="header">
    <ul>
      <li><a href="index.html"><strong>Home</strong></a></li>
      <li><a href="about.html">About</a><a href="service.html">Service</a></li>
      <li><a href="philanthropy.html">Philanthropy</a></li>
      <li><a href="members.html">Members</a></li>
      <li><a href="alumni.html">Alumni</a></li>
      <li class="style1"><a href="join.html">Join Us</a></li>
      <li> <a href="contact.html"><span class="style1">Contact </span></a></li>
    </ul>
    <img src="Images/header.jpg" width="717" height="288" /></div>
  <div id="content">
    <div align="left" id="left">
      <h1 class="style2"><span style="color:rgb(51, 102, 255);">blah</span></h1>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/pages/Sigma-Lambda-Sigma-Service-Sorority/203075126411924" width="292" show_faces="false" border_color="" stream="false" header="false"></fb:like-box></p>
      <h1>&nbsp;</h1>
      <div id="photos"></div>
    </div>
    <div id="footerline"></div>
  </div>
  <div id="footer">2011</div>
</div>
</body>
</html>