HTML div element covering whole form when viewed in inspector in firefox
Question
I am new to CSS. Created a form with 4 input text boxes. Here is the code:
body { background: #484848; color: white; margin:0px; } .pagetop{ width:1280px } header{ background: #D9853B; padding:15px 40px; margin:20px; } a{ color:white; } div{ padding:2px; } .pagetop nav h1,ul,li{ display:inline; } nav ul,li{ padding: 20px; } .signinform{ margin:0 auto; margin-top:20px; max-width: 600px; } .inputleft{ width: 30%; float: left; text-align: right; } .inputright{ width: 65%; margin-left: 10px; float:left; } .submitbutton{ width: 60%; align-self: center; }
<html> <head> <link rel="stylesheet" href="src/static/base.css"> </head> <form method="post" class="signinform"> <div class="inputleft"> UserName: </div> <div class="inputright"> <input type="text" name="username" value={{username}}> </div> <div class="inputleft"> Password: </div> <div class="inputright"> <input type="password" name="pwd"> </div> <div class="inputleft"> Verify Password: </div> <div class="inputright"> <input type="password" name="pwdverify"> </div> <div class="inputleft"> Email(Optional): </div> <div class="inputright"> <input type="text" name="email" value={{email}}> </div> <div> <input type="submit"> </div> </form> </html>
The last div element in the form covers all of the form when viewed in inspector in Firefox browser, my understanding says when I hover over div element then only div element should be highlighted not the other elements of form element.
This problem occurs when I apply the inputright style. Please explaing what's going on here.
1 answers
solution1
2 ACCPTED 2016-09-09 11:21:28
First you have to close your <form> tag and the main thing to remember is to use clear:both; after every div where you have used float css.
This is must thing while using float as by float we are breaking the flow and pushing element to come inline so when element did not fit in space they got misaligned. You did not get that issue yet but to save your self by that issue, better use clear:both after every floated div so it will clear the blank space and you will save from that issue.
Also if you won't clear then it won't appear in inspect too. See my example i have used clear:both after every floated row so there won't be any issue with blank space or inspect element like you are facing.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.