Question: I made a web page with the following code and viewed it in Google Chrome.

```
<html>
<head>
        <style type="text/css">
                html {padding:30px; background-color:blue;}
                body {margin:0px; background-color:red;}
        </style>
</head>
<body>
hello world
</body>
</html>

```

The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.

How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?

**Additional notes** I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.

Answer: 
if i understand you correctly, set your html & body width to 100% , height 100%

> 
> <http://jsfiddle.net/Diezel23/Lv6Vw/#base>
> 
> 
>
You could add an additional div:

```
<html>
    <head>
        <style>
            body {
                padding: 30px;
                margin: 0px;
            }
            div {
                width: 100%;
                height: 100%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            ABC
        </div>
    </body>
</html>

```