After using float, the top and bottom order between div blocks is wrong_html/css

After using float, the top and bottom order between div blocks is wrong_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:08:30

Original

1325 people have browsed it

Let’s look at the code first

<div id="formpanel">       		<form>          <div id="username_field">                	<div id="usernamepic">                    	<img src="images/images/images/username_06.jpg"/>                    </div>                    <div id="inputfield">                    	<input type="text" style="width:227px; height:22px; border-color:b9b9b9" />                    </div>	                 </div>                     <div id="password_field">                	<div id="usernamepic">                    	<img src="images/images/images/images/password_09.jpg"/>                    </div>                    <div id="inputfield">                    	<input type="text" style="width:227px; height:22px; border-color:b9b9b9" />                    </div>	                 </div>              </form>   		           		</div>

Copy after login

#formpanel{	width:341px;	height:135px;	margin-left:auto;	margin-right:auto;	}#username_field{	margin-top:0px;	width:340px;	}#usernamepic{	float:left;	margin-top:0px;	margin-left:0px;}#inputfield{	float:right;	margin-top:0px;	margin-right:0px;	width:228px;	height:27px;}#password_field{	width:340px;}

Copy after login

The problem now is that I want to have such a result
But it has such a result

I am Setting margin-top in password does not work. Why? I want to leave 24 pixels between the two inputs.

Reply to discussion (solution)

#password_field{
margin-top:10px;
width:340px;
}

<html><head>  <title></title>  <style type="text/css">#formpanel{    width:341px;    height:135px;    margin-left:auto;    margin-right:auto;    }.field-container{    margin-top:0px;    width:340px;    position: relative;}.usernamepic{    position: absolute;    margin-top:0px;    margin-left:0px;}.inputfield{    margin-top:0px;    margin-right:0px;    width:228px;    height:27px;}.inputfield input{padding-left: 24px;}  </style></head><body><div id="formpanel">               <form>          <div class="field-container">                    <div class="usernamepic">                        <img src="images/images/images/username_06.jpg"/>                    </div>                    <div class="inputfield">                        <input type="text" style="width:227px; height:22px; border-color:#b9b9b9" />                    </div>                     </div>                     <div class="field-container">                    <div class="usernamepic">                        <img src="images/images/images/images/password_09.jpg"/>                    </div>                    <div class="inputfield">                        <input type="text" style="width:227px; height:22px; border-color:#b9b9b9" />                    </div>                     </div>              </form>                              </div></body></html>

Copy after login

The fastest way is:
#password_field{
float:right;
width:340px;
margin-top:24px;
}

I hope it is helpful to you, welcome to visit again!!

Why do we need two different layers and unnecessary styles when the username and password are the same layout?

Don’t complicate simple things, HTML is enough.