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 😀
I have uploaded some images so you can see what the normal look is and what happens when I resize the browser and scroll to the right.
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 🙂
Here is my html/css:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Unauthorised.aspx.cs" Inherits="_Default" %>
<!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>
<style>
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;}
</style>
<title>Unauthorised Personnel Warning</title>
</head>
<body>
<div id="Banner">
<asp:Image ID="BannerImage" runat="server" ImageUrl="~/Resources/Gradient Banner.png" />
</div>
<div id="Backgrounds">
<asp:Panel ID="OuterBackgroundPanel" runat="server" BackColor="#D6E8FF">
<asp:Panel ID="InnerBackgroundPanel" runat="server" BackColor="#EBF3FF">
<asp:Panel ID="MessagePanel" runat="server" BackColor="#FFFFFF">
<h1>Title text.</h1>
<h2>Message text.</h2>
<p>Description text.</p>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</div>
</body>
</html>
You use min-width for Banner for example