div overlapping positioning in 3 rows fluid layout - html

Question

I have a 3 rows fluid layout after a media query the css is
html, body {
height : 100%;
margin : 0;
padding : 0;
font-family : Arial, Helvetica, sans-serif;
font-size : 85%;
color : #333399;
}
h1 {
font-size : 380%;
font-weight : bold;
margin : 0;
}
#container {
width: 100%;
}
#header {
width:95%;
height:80px;
float:left;
top:0;
left:0;
}
#indexleft {
display:none;
}
#indexright {
float:left;
top:;
width:85%;
margin: 0 auto;
}
#footer {
float: left;
height: 50px;
left: 0;
width: 100%;
bottom: 0;
position: absolute;
}
#footer p {
text-align: center;
}
.clearCol{
display:none;
}
.space{
display:none;
}
.indexheader {
width: 95%;
text-align:center;
left:0;
top:20px;
margin-bottom:10px;
}
#indexcontainer {
left: 20px;
position: relative;
top: 0;
}
#indexcontainer .indextext{
width : 80%
}
#indexcontainer .formstyle{
width : 80%;
float: left;
margin-top: 10px;
vertical-align: middle;
}
input[type="submit"]:hover {
background-color : #652D91;
color : #FFFFFF;
cursor : pointer;
}
.button, .textfields, .select {
background-color : #BAB3D6;
border : 0;
color : #333399;
margin-bottom : 10px;
padding : 5px;
-webkit-appearance: none;
}
#indexcontainer .textfields {
margin-right: 10px;
width: 250px;
}
<div id="container">
<div id="indexleft">
<div class="top"></div>
<div><img alt="" src="#"></div
</div><div id="header">
<div class="indexheader"><h1>unblock code</h1></div>
</div>
<div> </div>
<div id="indexright">
<div id="indexcontainer">
<div><img alt="" src="#"></div>
<div class="indextext">request yours unblock code (check spam folder)</div>
<div class="formstyle">
<div class="error"> </div>
<form action="#" method="post">
<div><input type="text" name="username" class="textfields">Username</div>
<div><input type="password" name="password" class="textfields">Password</div>
<div><input type="text" name="email" class="textfields">Email</div>
<div><input type="submit" value="Send" name="send" class="button"></div>
</form>
</div>
</div>
</div><div class="clearCol"></div>
<div id="footer">
<p>Copyright © 2001-2017 localhost Conctat us</p>
<!-- **********end footer*********** -->
</div>
</div>
I have 3 problems
Check the snippet for my CSS.
when window is reduced header indexright and footer div overlap
Description text slips below instead of above textfield
I want header and footer fixed and index-right fluid

Answer 1

Don't know if I understood everything correctly, but this should be close.
PS, use form labels.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
color: #333399;
}
h1 {
font-size: 380%;
font-weight: bold;
margin: 0;
}
#container {
width: 100%;
}
#header {
width: 95%;
top: 0;
left: 0;
}
#indexleft {
/*display:none;*/
}
#indexright {
float: left;
top: ;
width: 85%;
margin: 0 auto;
}
#footer {
float: left;
height: 50px;
left: 0;
width: 100%;
bottom: 0;
position: absolute;
}
#footer p {
text-align: center;
}
.clearCol {
display: none;
}
.space {
display: none;
}
.indexheader {
width: 95%;
text-align: center;
left: 0;
top: 20px;
margin-bottom: 10px;
}
#indexcontainer {
left: 20px;
position: relative;
top: 0;
}
#indexcontainer .indextext {
width: 80%
}
#indexcontainer .formstyle {
width: 80%;
float: left;
margin-top: 10px;
vertical-align: middle;
}
#indexcontainer .formstyle div{
clear: both;
}
input[type="submit"]:hover {
background-color: #652D91;
color: #FFFFFF;
cursor: pointer;
}
.button,
.textfields,
.select {
background-color: #BAB3D6;
border: 0;
color: #333399;
margin-bottom: 10px;
padding: 5px;
-webkit-appearance: none;
}
#indexcontainer .textfields {
margin-right: 10px;
width: 250px;
float: left;
}
.formstyle label{
line-height: 23px;
}
#media (max-width: 700px) {
#footer {
clear: both;
position: static;
float: none;
}
}
<div id="container">
<div id="indexleft">
<div class="top"></div>
<div>
<a href="#">
<img alt="" src="#">
</a>
</div </div>
<div id="header">
<div class="indexheader">
<h1>unblock code and if text is long header div overlap</h1>
</div>
</div>
<div> </div>
<div id="indexright">
<div id="indexcontainer">
<div>
<img alt="" src="#">
</div>
<div class="indextext">request yours unblock code (check spam folder)</div>
<div class="formstyle">
<div class="error"> </div>
<form action="#" method="post">
<div>
<label>Username</label>
<input type="text" name="username" class="textfields"></div>
<div>
<label>Password</label>
<input type="password" name="password" class="textfields"></div>
<div>
<label>Email</label>
<input type="text" name="email" class="textfields"></div>
<div>
<input type="submit" value="Send" name="send" class="button">
</div>
</form>
</div>
</div>
</div>
<div class="clearCol"></div>
<div id="footer">
<p>Copyright © 2001-2017 localhost Conctat us
</p>
<!-- **********end footer*********** -->
</div>
</div>