Looking for assistance with a simple layout issue. When I scale the font in browsers by using CTRL and scrolling up (zooming), the layout does not behave as expected.
I want #allWrapper to scale its dimensions with the body so that the white background extends to the full width. If you zoom in enough and a horizontal scroll bar appears, try scrolling to the right. You'll notice that the allWrapper is smaller than the body, causing the body's color to show instead of white. However, I can't make the whole body white because the footer will also be in this color (not white). Here is the condensed code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div,body{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
body{font-family:Arial,sans-serif;background-color:#066789;}
#allWrapper{background-color:white;}
#header .content {height:90px;background-color:white; position:relative;}
#mainWrapper{margin-top:0.5em; line-height:1.5;}
.center {width:980px;margin:0px auto;}
</style>
</head>
<body>
<div id="allWrapper">
<div id="header">
<div class="center">
<div class="content">
HEADER
</div>
</div>
</div>
<div id="content">
<div id="mainWrapper">
<div class="center">
<div class="content">MAIN CONTENT</div>
</div>
</div>
</div>
</div>
</body>
</html>