CSS: problem with horizontal scrolling_问答_开发者

开发者 https://www.devze.com 2023-03-21 02:47 出处：网络

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, thi

相关专题：css scroll

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 c开发者_JS百科ontent="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;

}

CSS: problem with horizontal scrolling

For everything but IE6 you can add min-width: 910px to the #footer rule. For IE6 I'm not sure

When a browser window is narrower than its content, by default it scrolls to show all of that content. To turn this off, use overflow-x:hidden on body or a parent element.

put your footer id in quotes to abide by XHTML specs ...

<div id=footer> should be <div id="footer">

Trying putting "width:100%" on main -- or at least inspecting "main" to see how wide it is. I bet it's only 910px wide.

UPDATE: This works fine in JSfiddle, pretty sure the problem must be in pie.css or layout.css!