Search code examples
htmlcsscenterfooter

How to center webpage content with many div structures

I was working on a page that I want to make the page in the center of the browser. It's working as expected when it's zooming in. But when it zoomed out, the page gets shifted to the right. Can someone tell me what I did wrong? Thanks.

enter image description here

If I zoom-out this becomes: enter image description here

<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<body onload="init()";>

<!-- container panel-->
<div id="container">  

    <!-- header panel-->
    <div class="header">sssss</div>

    <div id="main">
    <!-- left panel-->

        <div class="leftpanel">sssss</div>

        <div class="rightpanel">
            <div class="toppanel">sssss</div>
            <div class="content">sssss</div>
        </div>
    </div>

    <!-- footer-->
    <div class="footer">sssss</div>

</div>
</body>
</html>

Also this is the css part:

#bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
#container {
    position: relative;
    z-index: 3;
    width: 1000px;
    margin: 0 auto 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 1500px;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}
Solution

  • body should not have a width of 1500px, should be 100%; #container should be max-width:1000px; width:100%; Also, anchor #container to body

    Please make these changes:

    #bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #8888ff;
    z-index: 1;
    box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
body #container {
    position: relative;
    z-index: 3;
    max-width:1000px;
    width:100%;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
    position: relative;
    padding: 60px 28px 0px 28px;
    width: 1124px;
}
body 
{ 
    float: center;
    text-align: center; 
    width: 100%;
    margin:0 auto;
    background-color: 7777ff;
} 
.leftpanel
{
    width: 18%;
    float: left;
    padding: 10;
    padding-top: 20;
    margin-bottom: 40;
    background: orange;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
    position: relative;
    width: 70%;
    margin: 0 0 0 160px;
}
.toppanel
{
    margin-left: 70px;
    background-color: #fbbbb9;
    padding: 20px;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
    box-shadow: 5px 5px 5px #888;   
}
.content
{
    margin-left: 70px;
    padding-bottom: 50px;
    background-color: white;
}
.box {
    margin: 0 0 30px 0;
    background-color: orange;
    overflow: hidden;
}
.footer
{
    padding: 40px 0 40px 0;
    text-align: center;
    color: white;
}

    You can see this in action on jsfiddle: http://jsfiddle.net/MX9kC/