html - 3行流体布局中的div重叠定位

Question

在 css 的媒体查询之后，我有一个 3 行的流体布局

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>

我有3个问题 检查我的 CSS 代码段。

1. 当窗口缩小时 header indexright 和 footer div 重叠
2. 描述文本滑到下面而不是上面的文本字段
3. 我希望页眉和页脚固定，索引右移

Answer 1

不知道我是否理解正确，但这应该很接近。

PS，使用表单标签。

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>