Question 176992 in Html Question posted in
Some basic documentation can be found here.

Can HTML split existing content into 3 columns/parts?

I have the following code which displays everything vertically:

.scanTitle {
  display: flex;
  justify-content: center;
}

div.form {
  display: block;
  text-align: center;
}

form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.checkboxes label {
  display: block;
  margin-left: 20px;
}
.checkboxes label:first-of-type {
  margin-left: 0;
}

.requiredFieldLabel {
  border: none;
  margin: 0px;
  padding: 2px;
  color: #333366;
  font-family: "verdana";
  font-size: small;
  vertical-align: middle;
  text-align: right;
}

.requiredFieldLabel::before {
  content: "* ";
  color: red;
  font-weight: bold;
}
<div>
  <div class="scanTitle">Employee Title</div>
  <div class="form">
    <form id="copysomeForm" action="/abc/employee.htm" method="POST">
      <div>
        <label class="requiredFieldLabel">Employee ID</label>
        <input type="text" />
      </div>
      <div>
        <label class="requiredFieldLabel">Delay Reason for All Employees</label>
        <select id="reasonSelect" name="delayReason" onchange="reasonChanged()">
          <option value="">-No Selection-</option>
          <option value="Late Payment">Late Payment</option>
          <option value="Options Test One">Options Test One</option>
        </select>
      </div>
      <div>
        <div>
          <label>
            <input id="sendEmailAlert1" name="sendEmailAlert" type="checkbox" />
            Send Email
          </label>
        </div>
        <div><label>Subject:</label></div>
        <div>
          <input
            id="empSubject"
            name="empSubject"
            type="text"
            value=""
            size="35"
            maxlength="100"
          />
        </div>
        <div>
          <label>Message:</label>
        </div>
        <div>
          <textarea
            id="empMessage"
            name="empMessage"
            rows="5"
            cols="35"
          ></textarea>
        </div>
        <div>
          <label>CC:</label>
        </div>
        <div>
          <input
            id="empCC"
            name="empCC"
            type="text"
            value=""
            size="35"
            maxlength="100"
          />
        </div>
      </div>
      <div>
        <label>
          <input id="topList" name="list1" type="checkbox" />
          Employee Sign
        </label>
      </div>
      <div class="checkboxes">
        <label>
          <input id="topList" name="list1" type="checkbox" />
          Employee Decision
        </label>
        <label>
          <input id="list1" name="list2" type="checkbox" />
          Go Right
        </label>
        <label>
          <input id="list2" name="list3" type="checkbox" />
          Turn Off the Switch
        </label>
        <label>
          <input id="list3" name="list4" type="checkbox" />
          Go Left
        </label>
      </div>
      <div>
        <div>
          <label>Note I</label>
        </div>
        <div>
          <textarea id="empNote1" name="empNote1" rows="5" cols="35"></textarea>
        </div>
      </div>
      <div>
        <div>
          <label>Note II:</label>
        </div>
        <div>
          <textarea id="empNote2" name="empNote2" rows="5" cols="35"></textarea>
        </div>
      </div>
      <div>
        <div>
          <label>Comment:</label>
        </div>
        <div>
          <textarea
            id="empComment"
            name="empComment"
            rows="5"
            cols="35"
          ></textarea>
        </div>
      </div>
      <div>
        <label class="requiredFieldLabel">Tag</label>
        <select
          id="reasontagSelect"
          name="tagReason"
          onchange="reasonTagChanged()"
        >
          <option value="">-No Selection-</option>
          <option value="Tag1">Tag1</option>
          <option value="Tag2">Tag2</option>
        </select>
      </div>
    </form>
  </div>
</div>

I’m looking to split it into three columns type of sections as shown in the image below:

enter image description here

I was thinking about using float: left for the "Send Email" check box and the "Subject", "Message", and "CC" text inputs, so that they display on the left; and using float: right for the "Note II" and "Comment" text inputs and the "Tag" drop-down; but I’m not sure how to put the checkboxes and "Note I" in the middle. Am I thinking about it correctly?

Note: I just came up with these 3 columns idea as I want to have the whole page covered with some content and not show it vertically.

Tags:

2

Answers


  1. 0

    Rather than changing the float of each individual element, put those elements in <div>s and use float: left; and width: 33% on each of those <div>s to make them columns. Try the snippet below (note: the snippet viewer is too small for 3 columns, so click the Full Page button to display it properly):

    .col {
  float: left;
  width: 33%;
}

.scanTitle {
  display: flex;
  justify-content: center;
}

div.form {
  display: block;
  text-align: center;
}

form {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.checkboxes label {
  display: block;
  margin-left: 20px;
}

.checkboxes label:first-of-type {
  margin-left: 0;
}

.requiredFieldLabel {
  border: none;
  margin: 0px;
  padding: 2px;
  color: #333366;
  font-family: "verdana";
  font-size: small;
  vertical-align: middle;
  text-align: right;
}

.requiredFieldLabel::before {
  content: "* ";
  color: red;
  font-weight: bold;
}
    <div>
  <div class="scanTitle"> Employee Title</div>
  <div class="form">
    <form id="copysomeForm" action="/abc/employee.htm" method="POST">
      <div class="col">
        <div><label><input id="sendEmailAlert1" name="sendEmailAlert" type="checkbox" >Send Email</label></div>
        <div><label>Subject:</label></div>
        <div>
          <input id="empSubject" name="empSubject" type="text" value="" size="35" maxlength="100">
        </div>
        <div>
          <label>Message:</label>
        </div>
        <div>
          <textarea id="empMessage" name="empMessage" rows="5" cols="35"></textarea>
        </div>
        <div>
          <label>CC:</label>
        </div>
        <div>
          <input id="empCC" name="empCC" type="text" value="" size="35" maxlength="100">
        </div>
      </div>

      <div class="col">

        <div>
          <label class="requiredFieldLabel">Employee ID</label>
          <input type="text" />
        </div>
        <div>
          <label class="requiredFieldLabel">Delay Reason for All Employees</label>
          <select id="reasonSelect" name="delayReason" onchange="reasonChanged()">
            <option value="">-No Selection-</option>
            <option value="Late Payment">Late Payment</option>
            <option value="Options Test One">Options Test One</option>
          </select>
        </div>
        <div>


        </div>
        <div>
          <label><input id="topList" name="list1" type="checkbox">Employee Sign</label>
        </div>
        <div class="checkboxes">
          <label><input id="topList" name="list1" type="checkbox">Employee Decision</label>
          <label><input id="list1" name="list2" type="checkbox">Go Right</label>
          <label><input id="list2" name="list3" type="checkbox">Turn Off the Switch</label>
          <label><input id="list3" name="list4" type="checkbox">Go Left</label>
        </div>
      </div>
      <div class="col">
        <div>
          <div>
            <label>Note I</label>
          </div>
          <div>
            <textarea id="empNote1" name="empNote1" rows="5" cols="35"></textarea>
          </div>

        </div>
        <div>
          <div>
            <label>Note II:</label>
          </div>
          <div>
            <textarea id="empNote2" name="empNote2" rows="5" cols="35"></textarea>
          </div>
        </div>
        <div>
          <div>
            <label>Comment:</label>
          </div>
          <div>
            <textarea id="empComment" name="empComment" rows="5" cols="35"></textarea>
          </div>
        </div>
        <div>
          <label class="requiredFieldLabel">Tag</label>
          <select id="reasontagSelect" name="tagReason" onchange="reasonTagChanged()">
            <option value="">-No Selection-</option>
            <option value="Tag1">Tag1</option>
            <option value="Tag2">Tag2</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You can use CSS Grid to arrange all the sections.

    Changes I made:

    • Wrapped the sections in divs with appropriate classes.
    • Changed the form‘s display to grid.
    • Added grid-template-areas to the form.
    • Set the grid-area on each of the sections.
    • Set justify-self: center on the top section to center align it. You could also leave it as the default stretch and use Flexbox to align the contents as desired.

    I have added borders to show element boxes.
    Also, I removed the <div class="form"> and its styling. The styling was unnecessary, and I could see no purpose in keeping the div, as this is intended to be an example, not a copy-pasteable solution.

    form {
  display: grid;
  grid-template-areas:
    "top top top"
    "left center right";
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.grid-top {
  grid-area: top;
  justify-self: center;
  border: 1px solid red;
}

.grid-left {
  grid-area: left;
  border: 1px solid red;
}

.grid-center {
  grid-area: center;
  border: 1px solid red;
}

.grid-right {
  grid-area: right;
  border: 1px solid red;
}

.scanTitle {
  display: flex;
  justify-content: center;
}

.checkboxes label {
  display: block;
  margin-left: 20px;
}

.checkboxes label:first-of-type {
  margin-left: 0;
}

.requiredFieldLabel {
  border: none;
  margin: 0px;
  padding: 2px;
  color: #333366;
  font-family: "verdana";
  font-size: small;
  vertical-align: middle;
  text-align: right;
}

.requiredFieldLabel::before {
  content: "* ";
  color: red;
  font-weight: bold;
}
    <div>
  <div class="scanTitle">Employee Title</div>
  <form id="copysomeForm" action="/abc/employee.htm" method="POST">
    <div class="grid-top">
      <div>
        <label class="requiredFieldLabel">Employee ID</label>
        <input type="text" />
      </div>
      <div>
        <label class="requiredFieldLabel">Delay Reason for All Employees</label>
        <select id="reasonSelect" name="delayReason" onchange="reasonChanged()">
          <option value="">-No Selection-</option>
          <option value="Late Payment">Late Payment</option>
          <option value="Options Test One">Options Test One</option>
        </select>
      </div>
    </div>

    <div class="grid-left">
      <div>
        <div>
          <label
            ><input
              id="sendEmailAlert1"
              name="sendEmailAlert"
              type="checkbox"
            />Send Email</label
          >
        </div>
        <div><label>Subject:</label></div>
        <div>
          <input
            id="empSubject"
            name="empSubject"
            type="text"
            value=""
            size="35"
            maxlength="100"
          />
        </div>
        <div>
          <label>Message:</label>
        </div>
        <div>
          <textarea
            id="empMessage"
            name="empMessage"
            rows="5"
            cols="35"
          ></textarea>
        </div>
        <div>
          <label>CC:</label>
        </div>
        <div>
          <input
            id="empCC"
            name="empCC"
            type="text"
            value=""
            size="35"
            maxlength="100"
          />
        </div>
      </div>
    </div>

    <div class="grid-center">
      <div>
        <label
          ><input id="topList" name="list1" type="checkbox" />Employee
          Sign</label
        >
      </div>
      <div class="checkboxes">
        <label
          ><input id="topList" name="list1" type="checkbox" />Employee
          Decision</label
        >
        <label><input id="list1" name="list2" type="checkbox" />Go Right</label>
        <label
          ><input id="list2" name="list3" type="checkbox" />Turn Off the
          Switch</label
        >
        <label><input id="list3" name="list4" type="checkbox" />Go Left</label>
      </div>
      <div>
        <div>
          <label>Note I</label>
        </div>
        <div>
          <textarea id="empNote1" name="empNote1" rows="5" cols="35"></textarea>
        </div>
      </div>
    </div>

    <div class="grid-right">
      <div>
        <div>
          <label>Note II:</label>
        </div>
        <div>
          <textarea id="empNote2" name="empNote2" rows="5" cols="35"></textarea>
        </div>
      </div>
      <div>
        <div>
          <label>Comment:</label>
        </div>
        <div>
          <textarea
            id="empComment"
            name="empComment"
            rows="5"
            cols="35"
          ></textarea>
        </div>
      </div>
      <div>
        <label class="requiredFieldLabel">Tag</label>
        <select
          id="reasontagSelect"
          name="tagReason"
          onchange="reasonTagChanged()"
        >
          <option value="">-No Selection-</option>
          <option value="Tag1">Tag1</option>
          <option value="Tag2">Tag2</option>
        </select>
      </div>
    </div>
  </form>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search