title: Basic asp.net web page resize issue
body: <p>I am creating a very basic asp.net web page to display an error message. It has no functionality just a static page.
  My problem is that the warning message box panel in the middle has a minimum size to enable correct word wrapping however when the browser is resized to smaller than that panel I get white space on the side of the page.
  I do not have a great deal of knowledge or experience working with web sites, css or even html so if someone could shed some light on this issue that would be fantastic :D</p>
  
  <p>I have uploaded <a href="http://imgur.com/a/3PYDC" rel="nofollow">some images</a> so you can see what the normal look is and what happens when I resize the browser and scroll to the right. </p>
  
  <p>Also a quick note it happens in all browsers I have tested (Chrome, IE, Mozilla) so I am fairly confident it is due to my lack of knowledge :)</p>
  
  <p>Here is my html/css:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Unauthorised.aspx.cs" Inherits="_Default" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;style&gt;
  html, body {margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding:0; width:100%; height:100%; font-size:100%;}
  #BannerImage {position:relative; padding:0; width:100%; height:10%;}
  #OuterBackgroundPanel {position:absolute; width:100%; height:90%; z-index:0;}
  #InnerBackgroundPanel{position:absolute; top:2%; left:1%; width:98%; height:94%; z-index:1;} 
  #MessagePanel {position:absolute; border:3px solid #000000; top:33%; left:33%; width:33%; height:33%; min-height:175px; min-width:425px; max-height:175px; max-width:450px;}
  h1 {text-align:center; font-family:Calibri; font-size:2em;}
  h2 {text-align:center; font-family:Calibri; font-weight:normal; font-size:1.2em;}
  p {text-align:center; font-family:Calibri; font-size:1em;}
  &lt;/style&gt;
  &lt;title&gt;Unauthorised Personnel Warning&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="Banner"&gt;
  &lt;asp:Image ID="BannerImage" runat="server" ImageUrl="~/Resources/Gradient Banner.png" /&gt;
  &lt;/div&gt;
  
  &lt;div id="Backgrounds"&gt;
  &lt;asp:Panel ID="OuterBackgroundPanel" runat="server" BackColor="#D6E8FF"&gt;
  &lt;asp:Panel ID="InnerBackgroundPanel" runat="server" BackColor="#EBF3FF"&gt;
  &lt;asp:Panel ID="MessagePanel" runat="server" BackColor="#FFFFFF"&gt;
  &lt;h1&gt;Title text.&lt;/h1&gt;
  &lt;h2&gt;Message text.&lt;/h2&gt;
  &lt;p&gt;Description text.&lt;/p&gt;
  &lt;/asp:Panel&gt;
  &lt;/asp:Panel&gt;
  &lt;/asp:Panel&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>