Mitchell B Mitchell B - 5 months ago 12
CSS Question

Layout struggles with form - HTML and CSS

I am fairly new to formatting in css. And I can't seem to find another question that is of similar layout to mine..
This is what I want it to look like:
layout design

At the moment this is what I have:



.RegisterBackground{
background-color:rgb(255,255,255);
float : none;
clear : both;
height : 400px;
width : 1000px;
margin-left:50px;
margin-top:50px;
margin-bottom:50px;

/* Makes div scrollable */
overflow-y: auto;
}

.blended_grid{
display : block;
width : 1100px;
overflow : auto;
margin : 0 auto;
}
*
{
border: 0;
margin: 0;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
background:#3F3079;
line-height: 16px;
}

<div class="blended_grid">
<div class="RegisterBackground">
<form action="" style="padding-left:10px; padding-top:10px;">
<label>Full Name: </label>
<input type="text" placeholder="Full Name" required style="border: 1px solid black;">
<br/><br/>
<label>Phone Number:</label>
<input type="number" placeholder="Phone Number" required style="border: 1px solid black;">
<br/><br/>
<label>Gender: </label>
<select name="cars "style="border: 1px solid black;">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br/><br/>
<label>Birthday: </label>
<input type="date" style="border: 1px solid black;">
<br/><br/>
<label>Type of Work: </label>
<select name="cars "style="border: 1px solid black;">
<option value="Fulltime">Full time</option>
<option value="Parttime">Part time</option>
<option value="Casual">Casual</option>
</select>
<br/><br/>
<label>Starting Date: </label>
<input type="date" required style="border: 1px solid black;">
<br/><br/>
<label>Annual leave left: </label>
<input type="number" placeholder="Current Annual Leave days left" required style="border: 1px solid black;">
<br/><br/>


<div style="padding-right:500px; float:right">
<label>Login Details: </label>
<input type="text" placeholder="Username" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
<br/><br/>
</div>


<label>Sick leave left: </label>
<input type="number" placeholder="Current Sick Leave days left" required style="border: 1px solid black;">
<br/><br/>

<label>Staff ID number: </label>
<input type="number" placeholder="Staff ID number" required style="border: 1px solid black;">
<br/><br/>



<label style="font-size:11px">Work days a week: </label>
<input type="number" placeholder="No. days work a week" required style="border: 1px solid black;">
<br/><br/>

</form>
</div>
</div>




Answer

I created a working example below by using display: table, display: table-row, and display: table-cell. These work mostly like the HTML tags. There are responsive issues with this method that can be remedied by the use of media queries.

* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }

body {
  display: inline-block;
  min-width: 100%;
  background: #3F3079;
  font: 12px Arial, Helvetica, sans-serif;
  color: #666666;
}

/* ************** Components ************** */

.blended-grid {
  margin: 0px auto;
  padding: 50px;
}

.register-background {
  background-color: rgb(255, 255, 255);
  padding: 10px;
}

.form { display: table; }
.form-section { display: table-cell; }
.form-section-bottom { vertical-align: bottom; }
.form-section + .form-section { padding-left: 20px; }

.form-section-with-footer {
  position: relative; /* Help position: absolute below */
  padding-bottom: 50px; /* should at least be equal to footer height */
}

.form-section-footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: right;
}

.form-group-header { font-size: 1.25em; }
.form-group { display: table; }
.form-control-wrapper { display: table-row; }
.form-control-wrapper + .form-control-wrapper > * { margin-top: 10px; }

.form-control-label {
  display: table-cell;
  white-space: nowrap;
  text-align: right;
  padding-right: 15px;
}

.form-control {
  display: table-cell;
  min-width: 100%;
  border: 1px solid black;
}
<div class="blended-grid">
  <div class="register-background">
    <form class="" action="">
      <div class="form-section">
        <div class="form-group">
          <div class="form-control-wrapper">
            <label class="form-control-label">Full Name: </label>
            <input class="form-control" type="text" placeholder="Full Name" required>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Phone Number:</label>
            <input class="form-control" type="number" placeholder="Phone Number" required>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Gender: </label>
            <select class="form-control" name="cars">
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Birthday: </label>
            <input class="form-control" type="date">
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Type of Work: </label>
            <select class="form-control" name="cars">
              <option value="Fulltime">Full time</option>
              <option value="Parttime">Part time</option>
              <option value="Casual">Casual</option>
            </select>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Starting Date: </label>
            <input class="form-control" type="date" required>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Annual leave left: </label>
            <input class="form-control" type="number" placeholder="Current Annual Leave days left" required>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Sick leave left: </label>
            <input class="form-control" type="number" placeholder="Current Sick Leave days left" required>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Staff ID number: </label>
            <input class="form-control" type="number" placeholder="Staff ID number" required>
          </div>

          <div class="form-control-wrapper">
            <label class="form-control-label">Work days a week: </label>
            <input class="form-control" type="number" placeholder="No. days work a week" required>
          </div>

        </div>
      </div>

      <div class="form-section form-section-bottom">
        <h2 class="form-group-header">Login Details</h2>
        <div class="form-group">
          <div class="form-control-wrapper">
            <input class="form-control" type="text" placeholder="Username" required>
          </div>
          <div class="form-control-wrapper">
            <input class="form-control" type="text" placeholder="Password" required>
          </div>
          <div class="form-control-wrapper">
            <input class="form-control" type="text" placeholder="Confirm Password" required>
          </div>
          <div class="form-control-wrapper">
            <input class="form-control" type="text" placeholder="Confirm Password" required>
          </div>
        </div>
      </div>

      <div class="form-section form-section-with-footer">
        <h2 class="form-group-header">Emergency Contact 1</h2>
        <div class="form-group">
          <div class="form-control-wrapper">
            <label class="form-control-label">Full Name: </label>
            <input class="form-control" type="number" placeholder="Full Name" required>
          </div>
          <div class="form-control-wrapper">
            <label class="form-control-label">Phone Number: </label>
            <input class="form-control" type="number" placeholder="Phone Number" required>
          </div>
        </div>
        <h2 class="form-group-header">Emergency Contact 2</h2>
        <div class="form-group">
          <div class="form-control-wrapper">
            <label class="form-control-label">Full Name: </label>
            <input class="form-control" type="number" placeholder="Full Name" required>
          </div>
          <div class="form-control-wrapper">
            <label class="form-control-label">Phone Number: </label>
            <input class="form-control" type="number" placeholder="Phone Number" required>
          </div>
        </div>

        <div class="form-section-footer">
          <button>Register</button>
        </div>
      </div>

    </form>
  </div>
</div>

The other changes include removing all back-to-back <br> tags and any inline style tags. These are a code smell. With these removed, we can focus on keeping the styling in CSS.

Comments