Home/ Questions/Q 7179053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T17:03:43+00:00

Below is the simple layout. I need help with this because when I scaling

  • 0

Below is the simple layout. I need help with this because when I scaling the font in browsers by pressing CTRL and scrolling up (zooming) then this this layout dont behave like I expected.

What I want is that #allWrapper should scale its dimensions with body so the white background will be on the all width. If You zoom font enough and horizontal scroll bar appear then try to scroll to the right and You will notice that the allWrapper is smaller than body and color of the body is showing instead of white. I cant make body white because footer will be in this color too (not white). Here is the short 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add the following to #allWrapper:

    min-width:980px;

    The issue is the html/body elements are 100% of the visible screen (not the entire layout) and #allWrapper is staying contained within those. The same problem can be seen if the browser is resized to a size less wide than 980px. By adding the min-width to #allWrapper, it forces #allWrapper to stay as wide as the contained box. If you prefer, min-width could be added to body instead.

    • 0