I'm building the default layout for some pages I'm developing, but I'm still new to html and css pages. In my code, the footer tag moves from the main div when I zoom, I'd like to know how to prevent elements from exiting the div when zooming is enabled. Here's the HTML and CSS code I'm using.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="reply-to" content="[email protected]" />
<link type="text/css" rel="stylesheet" href="../css/cabecalho.css"/>
<script type="text/javascript" src="../../js/jquery-ui.js"></script>
<script type="text/javascript" src="../../js/jQuery-Mask-Plugin.js"></script>
<script type="text/javascript"></script>
<title>System</title>
</head>
<body>
<div id="principal">
<header>
<nav class="menu2">
<ul>
<li><a href="#" class="current" >Produtos </a></li>
<li><a href="#" class="">Clientes</a></li>
<li><a href="#" class="" >Produtos </a></li>
<li><a href="#" class="">Clientes</a></li>
</ul>
</nav>
</header>
</div><!-- fim principal-->
<footer>
<p align="center">Copyright © 2014 Designed by <a href="#" class="">Teste</a></p>
</footer>
</body>
</html>
CSS
html {
background-color:rgba(0,0,0,0.75);
min-height:1020px;
min-width:740px;
}
body {
font-family: verdana;
font-style: normal;
font-weight: lighter;
font-size: 13px;
line-height: 22px;
text-align: justify;
}
div#principal {
width:1020px;
height:740px;
border:1px solid black;
margin-left:auto;
margin-bottom:auto;
margin-top:auto;
margin-right:auto;
/*visibility:hidden;*/
background-color:#E6E6FA;
-webkit-box-shadow: 0px 9px 50px -3px rgba(250,250,250,1);
-moz-box-shadow: 0px 9px 50px -3px rgba(250,250,250,1);
box-shadow: 0px 9px 50px -3px rgba(250,250,250,1);
overflow: auto;
}
header {
position:absolute;
padding: 0px 0px 0px 0px;
height: 207px;
width: 1020px;
background: url(../images/logo_img.png) top center no-repeat;
background-size: 1010px;
background-color:#E6E6FA;
}
nav {
text-align: center;
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
font-size: 0;
padding: 0px 0px 0px 0px;
margin: 175px 0px 0px 2px;
width: 1018px;
height: 30px;
}
nav ul {
padding: 0px 0px 0px 0px;
}
nav ul li {
display:inline;
}
nav a {
border: 1px solid black;
display: inline-block;
padding: 0 20px;
background: linear-gradient(to bottom, #b4ddb4 0%,#83c783 17%,#52b152 33%,#008a00 67%,#005700 83%,#002400 100%);
color:White;
text-decoration:none;
font: bold 12px Arial;
line-height: 29px;
}
nav a:hover {
background: linear-gradient(to bottom, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
}
nav a.current {
background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
}
nav a.dummy {
width:2px;
padding:0 0;
}
footer {
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-bottom: auto;
margin-top: -38px;
margin-right: auto;
width: 1020px;
height: 20px;
}
footer p {
padding: 0px 0px 0px 0px;
border: 1px solid red;
}
aside {
border: 1px solid red;
}
#botao {
border: 1px solid red;
}
Thank you