When I resize my browser, all elements change their position. Can anyone help me with this issue? The logo and navigation elements are not affected when I resize the browser. I have tried setting the position to fixed, absolute, or static but it doesn't resolve the problem.
<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;
background-image: url('dr5.jpg');
background-repeat:no-repeat;
margin:-70 0 0 0;
}
#face:hover {
background: #333;
border-left: 5px solid #000;
}
#face{ MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{
margin: 0 auto;
width: 100%;
background: #fff;
}
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
padding: 20px;
background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
}
#header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
}
.navigation li:hover h2 {
font-weight: bold;
color: yellow;
}
.navigation li:hover p {
color: orange;
padding-left: 5px;
}
#content-container
{ float: left;
width: 55%;
margin-top: -25px;
margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
.ti{
border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer{margin: 30px 20px -2px 0px;
overflow: hidden;
border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;"> <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
<h2>الصفحة الرئسية</h2>
<p>main page</p>
</li></a>
<a href="f.html"><li>
<h2>فلسفتنا</h2>
<p>our</p>
</li></a>
<a href="how.html"><li>
<h2>من نحن</h2>
<p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
<h2>الاستديو</h2>
<p>gallary</p>
</li></a>
<a href="https://www.facebook.com/ADAM.KIDS.JORDAN/?fref=ts"><image id="face" src="face.jpg" width="80px" height="80px"/></a>
</ul>
<div id="content-container">
<div id="content">
<h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;"> كلمة ترحيبية </h2>
<p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا ...