div overlapping positioning in 3 rows fluid layout

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><a href="#"><img alt="" src="#"></a></div
</div><div id="header">
<div class="indexheader"><h1>unblock code</h1></div>
 </div>
 <div>&nbsp;</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">&nbsp;</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 &copy; 2001-2017 localhost <a href="#">Conctat us</a></p>
<!--  **********end footer***********  -->
</div>
</div>

I have 3 problems Check the snippet for my CSS.

1. when window is reduced header indexright and footer div overlap
2. Description text slips below instead of above textfield
3. 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>&nbsp;</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">&nbsp;</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 &copy; 2001-2017 localhost <a href="#">Conctat us</a>
      </p>
      <!--  **********end footer***********  -->
    </div>
  </div>