Hi i would like that my webpage keep the same shape on different screen size or resolution
each time i go on a smaller screen the top of my page is bigger than the bottom. i would like to keep the same space on both side. is it possible?
thx in advance!

html
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<div id="main">

<div id="head">


</div>

<div id="menu">

</div>

<div id="content">

</div>

</div>

<div id="foot">
</div>
</body>
</html>

and this is my css

body {
margin: 0 auto;
font-size: 14px;
text-align: center;
background:url(bg_main01.jpg);
}

body div {
text-align: left
}

#main {
width: 1024px;
margin-left: auto;
margin-right: auto;
background:#6F0;

}

#head {
width: 1024px;
height: 291px;
background:#000;
background-repeat: no-repeat;
background-position: center;
text-align: center;
}

#menu {
width: 1024px;
height: 180px;
background:#F90;
background-repeat:repeat-x;
background-position: center;
text-align: center;
padding-top: 30px;
}



#content {
padding-left: 20px;
padding-right: 20px;
height:175px;
margin-top:4px;
}


#foot {
margin-left: auto;
margin-right: auto;
width: 1024px;
height: 20px;
padding-top: 20px;
text-align: center;
background:#000;
background-position: center;
background-repeat: no-repeat;
font-family: sans;
font-size: 10px;
color: #000000;
}
Member Avatar

diafol

on a smaller screen the top of my page is bigger than the bottom. i would like to keep the same space on both side. is it possible?

What does this mean max? This doesn't make much sense. By bigger you mean width or height? I'm assuming width.

From your markup, it look like your main container encloses everything, but the footer is outside this. If you want everything inside the container, do this:

<div id="main">

    <div id="head">
    </div>

    <div id="menu">
    </div>

    <div id="content">
    </div>

    <div id="foot">
    </div>

</div>