CSS and Page Layouts

I have created a page with in three sections:
top (banner)
left (nav bar)
middle (which really is the content)

I'm having problems with the positioning.  Works fine when the browser is at full screen, but when you start reducing it...

The middle is under the left (nav bar).  

Is there anyway to keep the middle next to the left no matter what?  Code is below and I was trying to use all with no luck...any help and thanks....Steve

CSS:
#top {
margin: 0px 0px;
padding: 0px 0px;
border: 0px #ccc none;
background: #0033CC;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";voice-family:inherit;
height: 70px;
}

#all {
margin: 0px 0px;
padding: 0px 0px;
border: 0px #ccc none;
height: 100px; /* ie5win fudge begins */
voice-family: "\"; position: fixed; clip: rect( )}\"";
voice-family:inherit;
}

#left {
float: left;
top: 70px;
left: 0px;
background: #0099FF;
width: 50%; /* ie5win fudge begins */
voice-family: "\"; clip: rect( ); position: fixed}\"";
voice-family:inherit;
width: 140px;
height: 100%;
}

html>body #left {
width: 140px; /* ie5win fudge ends */
height: 100%;
}

#middle {
absolute: top;
left: 140px;
top: 70px;
width: 500px; /* ie5win fudge begins */
voice-family: "\"; clip: rect( ); position: fixed}\"";
voice-family:inherit;

html>body #middle {
width: 500px; /* ie5win fudge ends */
}

HTML:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="file:///C|/Documents%20and%20Settings/storm/My%20Documents/Temp/css_test/test.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="top"> 
  <p>Banner<br>
    <img src="spacer.gif" width="640" height="1"> </p>
</div>
<div id="all">
<div id="left"> 
  <table width="100%" border="0">
    <tr>
      <td>
        <p>Nav Bar<br>
          Students<br>
          Faculty</p>
        <p>&nbsp; </p>
      </td>
    </tr>
  </table>
  <p><img src="spacer.gif" width="120" height="1"> </p>
</div>
<div id="middle"> 
  <table width="550" border="0">
    <tr>
      <td> 
        <h3> Foundation</h3>
        <br>
        <font face="Arial, Helvetica, sans-serif" size="2">The Foundation seeks 
        to ensure that a high-quality college education is accessible to all residents 
        of this area.</font> 
        <p><font face="Arial, Helvetica, sans-serif" size="2">Almost as old as 
          the College itself, the Foundation was formed in 1968 to accept gifts 
          in support of the College and its students. In the last 32 years, it 
          has grown to award over $100,000 in scholarships every year.</font></p>
      </td>
    </tr>
  </table>
  </div>
</div>
</div>
</body>
</html>

Received on Tuesday, 7 May 2002 14:46:47 UTC