I have the following issue whith this very simple task. I want to create

Question

0

Asked: May 23, 20262026-05-23T19:30:02+00:00 2026-05-23T19:30:02+00:00

I have the following issue whith this very simple task. I want to create

0

I have the following issue whith this very simple task.

I want to create a page with a black footer. Everything in the page should be inside a centered box of 910px of width… EXCEPT THE FOOTER, this should span all over the browser window. The contents of the footer should also be centered and inside a box of 910px of width.

The problem is that when browser window is less than 910px of width, the browser makes some part of the footer magically disappear. I don’t know why this happens. I add the complete code and some images illustrating the problem. Thanks in advance 🙂

HTML:

<!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>
    <title>prueba pie</title>

    <meta content="es-mx" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <link rel="stylesheet" type="text/css" href="pie.css"/>


    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
        swfobject.registerObject("intro", "9", "expressInstall.swf")
    </script>
</head>

<body>

    <div class="main">
        <div class="secondary">
            <p> ******************************</p>
        </div>

        <div id=footer>
        </div>

    </div>



</body>

</html>

CSS:

@import url(layout.css);

a:link {color:#9A9A9A;}    
a:hover {color:#2A2A2A;} 
a:active {color:#2A2A2A;} 
a:visited{color:#9A9A9A;}

body{
    margin: 0px;
    background-color: #FCFCFC;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    padding: 0px;
    font-size: small;
    color: #4B4B4B;
}
#footer{
    width: 100%;
    height: 130px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
    background: #232323;
    font-size: x-small;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #FCFCFC;
}
/*---------------- contenedor principal ---------------- */
.main{

    background: #FCFCFC;
    text-align: center;
}

/*---------------- contenedor secundario ---------------- */
.secondary{
    width: 910px;
    height: auto;
    margin: 0px auto;
    padding: 0px;
    position: relative;

}

enter image description here