HTML alignment issues

Question

I know there are so many similar posts for this question: CSS for Aligning TextBox and Label Move items in Ul Li up and down etc... but in this case, I have gotten my first text box and words aligned on one straight line, but when I try to figure out how to do this for the others, I get this result:

Result

When I clear my floats, this is my result:

ClearFloats

How can I fix my css/html so that each part is aligned on one line?

I have tried br p div elements, and others. Please help. Thanks!

Here is my html/css:

 <div class="section">  <a href="html_images.asp" target="_blank">Create New 
Meeting</a> 
<a href="html_images.asp" target="_blank">View All Current Meetings</a> 
</div>


<div class="bottom">
<a class="trigger_popup_fricc">Edit Account Settings</a> </div>

<div class="hover_bkgr_fricc">
<span class="helper"></span>
<div>
    <div class="popupCloseButton">X</div>
    <p>Current Employee Information<br />
        <h5 style="color:#000066">Employee ID: 835969</h5>   
        <h5 style="color:#000066">Employee Name: Maria Sanchez</h5>
        <h5 style="color:#000066"> Current Email Address: mmarie3@rrms.com</h5>
        <h5 style="color:#000066; float:left;margin-right:10px;"> Update Email Address:  </h5><input type="text" name="CurrentEmail" style="float:left; " value="mmarie3@rrms.com"><br> 
        <h5 style="color:#000066; float:left;margin-right:10px;">Current Password:</h5> <input type="text" style="float:left;" name="PasswordCurr" value="********"><br> 
        <h5 style="color:#000066; float:left;margin-right:10px;"> Update Password:</h5> <input type="text" style="float:left;" name="UpdatePass" value="     "><br>
        <h5 style="color:#000066; float:left;margin-right:10px;"> Confirm New Password:</h5> <input type="text" style="float:left;" name="ConfirmPass" value="      "><br>  
        <a href="#" class="myButton"><h6 style="color: whitesmoke">Submit</h6></a>                    
    </div>
</div>

I have added a pic of what happens when I clear my floats. – Clint Walton Apr 18 '18 at 00:43 — Clint Walton, Apr 18 '18 at 00:43

zgood · Accepted Answer · 2018-04-18T00:47:09.203

Instead of trying to use <br />'s to get a new line, wrap every <h5> and <input> in a div with a clearfix fix style.

I made some updates to the style to make the h5 label line with the input and added a little separation between the div's

   .clearfix {
   margin-bottom: 10px;
}

.clearfix:after {
   content: '';
   display: block;
   clear:both;
}

<div class="section"> <a href="html_images.asp" target="_blank">Create New 
Meeting</a>
  <a href="html_images.asp" target="_blank">View All Current Meetings</a>
</div>


<div class="bottom">
  <a class="trigger_popup_fricc">Edit Account Settings</a> </div>

<div class="hover_bkgr_fricc">
  <span class="helper"></span>
  <div>
    <div class="popupCloseButton">X</div>
    <p>Current Employee Information<br />
      <h5 style="color:#000066">Employee ID: 835969</h5>
      <h5 style="color:#000066">Employee Name: Maria Sanchez</h5>
      <h5 style="color:#000066"> Current Email Address: mmarie3@rrms.com</h5>
      <div class="clearfix">
      <h5 style="color:#000066; float:left;margin:0 10px 0 0;"> Update Email Address: </h5><input type="text" name="CurrentEmail" style="float:left; " value="mmarie3@rrms.com">
      </div>
      <div class="clearfix">
      <h5 style="color:#000066; float:left;margin:0 10px 0 0;">Current Password:</h5> <input type="text" style="float:left;" name="PasswordCurr" value="********">
      </div>
      <div class="clearfix">
      <h5 style="color:#000066; float:left;margin:0 10px 0 0;"> Update Password:</h5> <input type="text" style="float:left;" name="UpdatePass" value="     ">
      </div>
      <div class="clearfix">
      <h5 style="color:#000066; float:left;margin:0 10px 0 0"> Confirm New Password:</h5> <input type="text" style="float:left;" name="ConfirmPass" value="      ">
      </div>
      <a href="#" class="myButton">
        <h6 style="color: whitesmoke">Submit</h6>
      </a>
  </div>
</div>

There is no closing slash for `
` in HTML and there never has been. — Rob, Apr 18 '18 at 00:47
@Rob well actually.... https://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br XHTML life — Zze, Apr 18 '18 at 00:48
@Zze Yes, and if you read any actual HTML specification instead, since the beginning of time, you will never, ever, find any one of them to ever specify to use a closing slash. And that includes your linked answer. — Rob, Apr 18 '18 at 00:50
@Rob ok sure its not needed, I just put it there as a habit for self-closing tags, and sense it doesn't hurt I leave it. — zgood, Apr 18 '18 at 00:53
Do you also put an extra period at the end of a sentence cause it doesn't do any harm? If not, why do you do so for HTML where it winds up being ignored by browsers, considered tag soup, and, as the above link states, "harmful"? It doesn't do anything so why do you put it there? It only takes up space in a download. — Rob, Apr 18 '18 at 00:54

HTML alignment issues

1 Answers1