0

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;
}

Edited by madmax9922

2
Contributors
1
Reply
14
Views
2 Years
Discussion Span
Last Post by diafol
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.