Hi everyone,

I have a problem with the layout of my web page when the window is minimized to a certain width, unfortunately the vertical scroll bar appears and my CSS skills are not advanced enough to stop this without the updates conflicting with my present layout.

My page contains a .swf file as a header banner and I wonder if that is why the contents of the page don't follow the width of the window; incidentely when I minimize the window enough, the banner ends up overlapping and displaying out of the header div's limits (#top) which are themselves within the container div (#container).

This is a website that Im trying to develop for a little club I'm a member of. Although there is no hurry, I'd like to get started on functionalities and I seem to waist a lot of time on this issue. Can anyone help?

Here's my code for CSS and HTML, and thanks in advance.

Code:
@charset "utf-8";
/* CSS Document */

body 
{  
  text-align:center;
  padding:0;
  margin:0;
  background:#000000 url(../images/Pleiades.jpg) repeat-y center top;
  width:100%;
  display:table;
}  

/*#flashContent
{
	width:70%;
}*/

#container
{
  width: 80%;
  margin: 10px auto;
  text-align:left;
  border: 1px solid #ff0;
  line-height: 130%;
}

#top
{
  padding: .5em;
  border-bottom: 1px solid #ff0;
}
PS: I'm using Dreaweaver CS5 but rarely in design view, I prefer to code.

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>SubaruPassion - Home</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
  <div id="container">
	<div id="top" style="color:#FF0">
      <a href="index.html"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="150" id="FlashID" title="banner" style="margin:inherit; width:inherit">
        <param name="movie" value="flash/newSiteBanner.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="swfversion" value="11.0.0.0" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="flash/newSiteBanner.swf" width="1000" height="150">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
          <param name="swfversion" value="11.0.0.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <div>
            <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object></a>
	</div>
	<div id="leftnav" style="color:#ff0">
	<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
	</p>
	</div>
	<div id="content" style="color:#FF0">
	<h2>Subheading</h2>
	<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	</p>

	</div>
	<div id="footer" style="color:#ff0">
Footer
	</div>
  </div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
  </script>
</body>
</html>