Member Avatar for madmax9922

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
  • 263 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for 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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.