HTML CSS PHP shifting divs - php

Question

My divs keep shifting when I resize the page can someone help me with this?
html/php (php for login and page getter)
my html body part with some php for login in and something with the page
<div class="menu">
<img src="logo.png" style=" position: relative; margin-right: 38%">
<ul class="dropdown">
<li><a href="?page=Home" <?php if ($page == 'Home') { ?> id="a-active" <?php } ?> >Home</a>
<ul class="sub_menu">
<li>News</li>
<li>Servers</li>
</ul>
</li>
<li><a href="?page=Forum" <?php if ($page == 'Forum') { ?> id="a-active" <?php } ?> >Forum</a>
<ul class="sub_menu">
<li>Common</li>
<li>Information</li>
<li>Griefs & Player reports</li>
<li>
Unbans
</li>
</ul>
</li>
<li><a href="?page=Information" <?php if ($page == 'Information') { ?> id="a-active" <?php } ?> >Information</a>
<ul class="sub_menu">
<li>
Rules
</li>
<li>
Staff
</li>
<li>
Servers
<ul>
<li>Survival</li>
<li>Games</li>
</ul>
</li>
</ul>
</li>
<li><a href="?page=Topscores" <?php if ($page == 'Topscores') { ?> id="a-active" <?php } ?> > Topscores</a>
<ul class="sub_menu">
<li>Playtime</li>
<li>Kills</li>
<li>Game wins</li>
</ul>
</li>
<li><a href="?page=Donations" <?php if ($page == 'Donations') { ?> id="a-active" <?php } ?> >Donation</a>
</li>
</ul>
<div class="content">
<?php
if ($page == 'Forum') {
include 'forum/index.html';
} elseif ($page == 'Information') {
include 'information/index.html';
} elseif ($page == 'Topscores') {
include 'topscores/index.html';
} elseif ($page == 'Donations') {
include 'donations/index.html';
} elseif ($page == 'Home') {
include 'home/index.html';
} else {
include '404/index.html';
}
?>
</div>
<div class="contentmirror1">
<?php
if (isset($_SESSION['username'])) {
?>
<form width="110px" id="form1" name="form1" method="post" action="logout.php">
<table width="100px" border="0" align="center">
<tr>
<td colspan="2">Welcome</td>
</tr>
<tr>
<td><input readonly type="text" name="name" style="border:none; background-color: transparent;" value="<?php echo htmlspecialchars($_SESSION['username']); ?>"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Logout" /></td>
</tr>
</table>
</form>
<?php
} else {
?>
<form width="110px" id="form1" name="form1" method="post" action="login.php">
<table width="100px" border="0" align="center">
<tr>
<td colspan="2">Login</td>
</tr>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Login" /></td>
</tr>
</table>
</form>
<?php
}
?>
</div>
<div class="contentmirror" style="Clear: Both;">
spambox/online shizzle
</div>
</div>
my css
.head{
height: 115px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background: rgb(200,200,200);
z-index: -999;
}
html {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu{
display: inline-block;
position: absolute;
padding: 2%;
text-align: center;
width: 86%;
left: 0px;
top: 0px;
font-family: arial;
z-index: 0;
}
.menu::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
.content{
float: left;
margin-top: 5%;
width: 60%;
max-width: 60%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror{
float: right;
margin-top: -3%;
margin-right: 5%;
max-width: 26%;
width: 26%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contentmirror1{
float: right;
margin-top: -25%;
margin-right: 8%;
max-width: 26%;
width: 26%;
padding: 1%;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.sidepanelright{
float: right;
}
.main{
text-align: center;
font-family: arial;
font-size: 24px;
}
.pics {
width: 70%;
max-height: 100%;
margin: 0px auto;
}
.pic {
display: none;
background-color: transparent;
border: none;
width: 100%;
max-height: 100%;
}
.menu a{
color: black;
background-color: white;
padding: 5px 10px;
margin: 0px 5px;
border-radius: 10px;
text-decoration: none;
-moz-box-shadow: 0px 0px 20px 0px #4E4E4E;
-webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
box-shadow: 0px 0px 20px 0px #4E4E4E;
z-index: 0;
}
.menu a:hover{
padding: 7px 12px;
-moz-box-shadow: 0px 0px 30px 0px white;
-webkit-box-shadow: 0px 0px 30px 0px white;
box-shadow: 0px 0px 30px 0px white;
}
#logo{
float: left;
top: -90px;
position: relative;
margin: 5px 0px 0px 5px;
width: 15%;
max-height: 100%;
z-index: 1;
}
.btn:hover, .btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
#btn:hover, #btn:focus, #btn:active, #btn.active, #btn.disabled, #btn[disabled] {
color: #333333;
background-color: #e6e6e6;
}
#btn:hover, #btn:focus {
color: #333333;
text-decoration: none;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
#a-active{
color: black;
background-color: #DDDDDD;
padding: 5px 10px;
margin: 0px 5px;
border-radius: 10px;
text-decoration: none;
-moz-box-shadow: 0px 0px 20px 0px #4E4E4E;
-webkit-box-shadow: 0px 0px 20px 0px #4E4E4E;
box-shadow: 0px 0px 20px 0px #4E4E4E;
z-index: 0;
}
#a-active:hover{
background-color: white;
padding: 7px 12px;
-moz-box-shadow: 0px 0px 30px 0px white;
-webkit-box-shadow: 0px 0px 30px 0px white;
box-shadow: 0px 0px 30px 0px white;
}
* { margin: 0; padding: 0; }
body { font: 14px Helvetica, Sans-Serif; }
#page-wrap { width: 800px; margin: 25px auto; }
a { text-decoration: none; }
ul { list-style: none;}
p { margin: 15px 0; }
/*
LEVEL ONE
*/
.drops{
margin-left: 30%;
}
ul.dropdown { position: relative; margin-left: 37%; margin-top: 2%;}
ul.dropdown li { font-weight: bold; float: left; zoom: 1; }
ul.dropdown a:hover { }
ul.dropdown a:active { }
ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333;
}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover { color: black; position: relative; }
ul.dropdown li.hover a { color: black; }
/*
LEVEL TWO
*/
ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li { font-weight: normal; float: none; }
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; }
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; }
ul.dropdown li:hover > ul { visibility: visible; }
when I resize the window the divs shifts to the left or down. is there a way to set those divs on one position where they do not shift positions just stay there?

Answer 1

I pretty much didn't understand your code, but made this fiddle to make you understand how to fix the divs.
I would suggest you to avoid float for divs and do something like:
.fix{
/* this is parent div */
display:inline-block ;
white-space:nowrap;
}
.fxchld{
/* these are child divs */
width:50px;
display:inline-block ;
height:50px;
border:1px solid #000;
}
idea is to use display:inline-block ; instead of floats so that they remain fixed to their position
else
you'll have to give large parent div width so that child divs won't wrap
Fiddle will help you understand my point!!