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

<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}
<div id="container">
  <div id="header">
      <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>
    <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><div id="fb-root"></div><script src=""></script><fb:like-box href="" width="292" show_faces="false" border_color="" stream="false" header="false"></fb:like-box></p>
      <div id="photos"></div>
    <div id="footerline"></div>
  <div id="footer">2011</div>