HTML form of individual columns with borders

Question

I have 4 columns and I need a separate column with borders. Now it looks like this:

How it should be (e.g. red / blue colors):

The problem is that I don’t have a div for the columns, I am building the rows inside the <li> </li> , so the 4 inputs inside the <li> </li> are 1 row:

 <form class="form-style-9"> <h2>Personal details</h2> <ul> <div id="personal-details"> <li> <div class="test"> <label for="Rank">Rank</label> <input id="Rank" type="text" name="Rank" class="field-style field-split25 align-left" placeholder="Rank" /> </div> <div class="test"> <label for="RankApplied">Rank Applied</label> <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" /> </div> <div class="test"> <label for="Vesselstype">Vessel type</label> <input id="Vesselstype" type="text" name="Vesselstype" class="field-style field-split25 align-left" placeholder="Vessel type" /> </div> <div class="test"> <label for="datepicker2">Date Applied</label> <input id="datepicker2" type="date" name="datepicker2" class="field-style field-split25-4 align-left" placeholder="Date Applied" /> </div> </li> <li> <div class="test"> <label for="fname">First Name</label> <input id="fname" type="text" name="fname" class="field-style field-split25 align-left" placeholder="First Name" /> </div> <div class="test"> <label for="nationality">Nationality</label> <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" /> </div> <div class="test"> <label for="height">Height</label> <input id="height" type="text" name="height" class="field-style field-split25 align-left" placeholder="Height" /> </div> <div class="test"> <label for="na">Nearest airport</label> <input id="na" type="text" name="na" class="field-style field-split25-4 align-left" placeholder="Nearest airport" /> </div> </li> <li> <div class="test"> <label for="sname">Surename</label> <input id="sname" type="text" name="sname" class="field-style field-split25 align-left" placeholder="Surename" /> </div> <div class="test"> <label for="noc">No. of children</label> <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" /> </div> <div class="test"> <label for="weight">Weight</label> <input id="weight" type="number" name="weight" class="field-style field-split25 align-left" placeholder="Weight" /> </div> <div class="test4"> <label for="languages">Languages</label> <input id="languages" type="text" name="languages" class="field-style field-split25-4 align-left" placeholder="Languages" /> </div> </li> <li> <div class="test"> <label for="datepicker">Date of Birth</label> <input id="datepicker" type="date" name="datepicker" class="field-style field-split25 align-left" placeholder="Date of Birth" /> </div> <div class="test"> <label for="nok">Next of kin</label> <input id="nok" type="text" name="nok" class="field-style field-split25 align-left" placeholder="Next of kin" /> </div> <div class="test"> <label for="coe">Color of eyes</label> <input id="coe" type="text" name="coe" class="field-style field-split25 align-left" placeholder="Color of eyes" /> </div> <div class="test4"> <label for="english">English</label> <input id="english" type="text" name="english" class="field-style field-split25-4 align-left" placeholder="English" /> </div> </li> <li> <div class="test"> <label for="pob">Place of Birth</label> <input id="pob" type="text" name="pob" class="field-style field-split25-4 align-left" placeholder="Place of Birth" /> </div> <div class="test"> <label for="nonok">Name of Next of Kin</label> <input id="nonok" type="text" name="nonok" class="field-style field-split25 align-left" placeholder="Name of Next of Kin" /> </div> <div class="test"> <label for="coh">Color of hair</label> <input id="coh" type="text" name="coh" class="field-style field-split25 align-left" placeholder="Color of hair" /> </div> <div class="test4"> <label for="german">German</label> <input id="german" type="text" name="german" class="field-style field-split25-4 align-left" placeholder="German" /> </div> </li> <li> <div class="test"> <label for="HomeAddress">Home Address</label> <input id="HomeAddress" type="text" name="HomeAddress" class="field-style field-split25 align-left" placeholder="Home Address" /> </div> <div class="test"> <label for="aonok">Address of Next of Kin</label> <input id="aonok" type="text" name="aonok" class="field-style field-split25 align-left" placeholder="Address of Next of Kin" /> </div> <div class="test"> <label for="os">Overall size</label> <input id="os" type="text" name="os" class="field-style field-split25 align-left" placeholder="Overall size" /> </div> <div class="test4"> <label for="spain">Spain</label> <input id="spain" type="text" name="spain" class="field-style field-split25-4 align-left" placeholder="Spain" /> </div> </li> <li> <div class="test"> <label for="TelNo">Telephone No.</label> <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." /> </div> <div class="test"> <label for="TelNo">Telephone No.</label> <input id="TelNo" type="text" name="TelNo" class="field-style field-split25 align-left" placeholder="Telephone No." /> </div> <div class="test"> <label for="sz">Shoe size</label> <input id="sz" type="text" name="sz" class="field-style field-split25 align-left" placeholder="Shoe size" /> </div> <div class="test4"> <label for="BankDetails">Bank Details</label> <input id="BankDetails" type="text" name="BankDetails" class="field-style field-split25-4 align-left" placeholder="Bank Details" /> </div> </li> </div> 

Do you have any idea how I can achieve this? Here is FIDDLE

Answer 1

If you urgently need to save it as a string, you can use absolute ly, divs.

 #personal-details{ position: relative; } ul{ list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; } li{ width: 25%; } .parent{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .borders{ display: flex; justify-content: space-between; height: 40px; } .border{ border: 1px solid red; width: 25%; } 

 <div id="personal-details"> <ul> <li>this is first</li> <li>this is second</li> <li>this is third</li> <li>this is forth</li> <li>this is first</li> <li>this is second</li> <li>this is third</li> <li>this is forth</li> </ul> <div class="parent"> <div class="borders"> <div class="border"></div> <div class="border"></div> <div class="border"></div> <div class="border"></div> </div> </div> </div> 

Note1

Note that you should not place the div directly inside ul , so this is not true:

 <ul> <div> <li>Item</li> <li>Item</li> <li>Item</li> </div> </ul> 

Note2

It will be best practice if you create them in columns, so you don’t have to monkey with your CSS.

Desired Markup

 <ul id="personal-details"> <li> <ul class="column"> <li>Rank</li> <li>First name</li> <li>Surname</li> <li>Date of Birth</li> <li>Place of Birth</li> <li> ... </li> <li> ... </li> </ul> </li> <li> <ul class="column"> <li>Rank</li> <li>Nationality</li> <li>No. of children</li> <li>Next of kin</li> <li>Name of Next of kin</li> <li> ... </li> <li> ... </li> </ul> </li> <li> ... </li> <li> ... </li> </ul> 

Decision

 ul{ list-style: none; } #personal-details{ margin: auto; display: flex; justify-content: space-between; } #personal-details > li{ padding: 20px; border: 1px solid red; } .column{ padding: 0; text-align: center; } 

 <ul id="personal-details"> <li> <ul class="column"> <li> <label for="Rank">Rank</label> <input type="text" name="Rank" placeholder="Rank" /> </li> <li> <label for="Firstname">First name</label> <input type="text" name="Firstname" placeholder="Firstname" /> </li> <li> <label for="Surname">Surname</label> <input type="text" name="Surname" placeholder="Surname" /> </li> <li> <label for="Rank">Date of Birth</label> <input type="text" name="DateofBirth" placeholder="DateofBirth" /> </li> <li> <label for="PlaceofBirth">Place of Birth</label> <input type="text" name="PlaceofBirth" placeholder="Place of Birth" /> </li> <li> ... </li> <li> ... </li> </ul> </li> <li> <ul class="column"> <li> <label for="RankApplied">Rank Applied</label> <input type="text" name="RankApplied" placeholder="RankApplied" /> </li> <li> <label for="Nationality">Nationality</label> <input type="text" name="Nationality" placeholder="Nationality" /> </li> <li> <label for="NoOfChildren">No. Of Children</label> <input type="text" name="NoOfChildren" placeholder="NoOfChildren" /> </li> <li> <label for="NextOfKin">Next Of Kin</label> <input type="text" name="NextOfKin" placeholder="NextOfKin" /> </li> <li> <label for="NameOfNextOfKin">Name of Next of kin</label> <input type="text" name="NameOfNextOfKin" placeholder="NameOfNextOfKin" /> </li> <li> ... </li> <li> ... </li> </ul> </li> <li> <ul class="column"> <li> <label for="Rank">Rank</label> <input type="text" name="Rank" placeholder="Rank" /> </li> <li> <label for="Firstname">First name</label> <input type="text" name="Firstname" placeholder="Firstname" /> </li> <li> <label for="Surname">Surname</label> <input type="text" name="Surname" placeholder="Surname" /> </li> <li> <label for="Rank">Date of Birth</label> <input type="text" name="DateofBirth" placeholder="DateofBirth" /> </li> <li> <label for="PlaceofBirth">Place of Birth</label> <input type="text" name="PlaceofBirth" placeholder="Place of Birth" /> </li> <li> ... </li> <li> ... </li> </ul> </li> <li> <ul class="column"> <li> <label for="RankApplied">Rank Applied</label> <input type="text" name="RankApplied" placeholder="RankApplied" /> </li> <li> <label for="Nationality">Nationality</label> <input type="text" name="Nationality" placeholder="Nationality" /> </li> <li> <label for="NoOfChildren">No. Of Children</label> <input type="text" name="NoOfChildren" placeholder="NoOfChildren" /> </li> <li> <label for="NextOfKin">Next Of Kin</label> <input type="text" name="NextOfKin" placeholder="NextOfKin" /> </li> <li> <label for="NameOfNextOfKin">Name of Next of kin</label> <input type="text" name="NameOfNextOfKin" placeholder="NameOfNextOfKin" /> </li> <li> ... </li> <li> ... </li> </ul> </li> </ul> 

Answer 2

If you keep the existing markup, here is an option (although you may need to change the values ​​a bit)

It should be noted that the presence of <div id="personal-details"> as the direct child of ul is invalid markup and must be removed. You can put the id on ul .

Updated fiddle

 ul { position: relative; } ul li:first-child .test:before { content: ' '; position: absolute; display: block; border: 1px solid red; top: 0; left: 0; width: 23.5%; height: 100%; } ul li:first-child .test:nth-child(2):before { left: calc(23.5% + 1px); width: 24%; border: 1px solid blue; } ul li:first-child .test:nth-child(3):before { left: calc(47.5% + 1px); width: 24%; } ul li:first-child .test:nth-child(4):before { left: calc(71.5% + 1px); border: 1px solid blue; } 

Answer 3

You can try to change this as follows.

 <form class="form-style-9 clearfix"> <h2>Personal details</h2> <ul> <div id="personal-details"> <div class="col clearfix"> <div class="test"> <label for="Rank">Rank</label> <input id="Rank" type="text" name="Rank" class="field-style field-split25 align-left" placeholder="Rank" /> </div> <div class="test"> <label for="fname">First Name</label> <input id="fname" type="text" name="fname" class="field-style field-split25 align-left" placeholder="First Name" /> </div> <div class="test"> <label for="sname">Surename</label> <input id="sname" type="text" name="sname" class="field-style field-split25 align-left" placeholder="Surename" /> </div> <div class="test"> <label for="pob">Place of Birth</label> <input id="pob" type="text" name="pob" class="field-style field-split25-4 align-left" placeholder="Place of Birth" /> </div> </div> <div class="col clearfix"> <div class="test"> <label for="RankApplied">Rank Applied</label> <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" /> </div> <div class="test"> <label for="nationality">Nationality</label> <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" /> </div> <div class="test"> <label for="noc">No. of children</label> <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" /> </div> </div> <div class="col clearfix"> <div class="test"> <label for="RankApplied">Rank Applied</label> <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" /> </div> <div class="test"> <label for="nationality">Nationality</label> <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" /> </div> <div class="test"> <label for="noc">No. of children</label> <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" /> </div> </div> <div class="col clearfix"> <div class="test"> <label for="RankApplied">Rank Applied</label> <input id="RankApplied" type="text" name="RankApplied" class="field-style field-split25 align-left" placeholder="Rank Applied" /> </div> <div class="test"> <label for="nationality">Nationality</label> <input id="nationality" type="text" name="nationality" class="field-style field-split25 align-left" placeholder="Nationality" /> </div> <div class="test"> <label for="noc">No. of children</label> <input id="noc" type="number" name="noc" class="field-style field-split25 align-left" placeholder="No. of children" /> </div> </div> </form> 

Blockquote

 .form-style-9{ background: #FAFAFA; padding: 30px; margin: 50px auto; box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35); border-radius: 10px; border: 6px solid #305A72; } .form-style-9 ul{ padding:0; margin:0; list-style:none; } .form-style-9 ul li{ display: block; margin-bottom: 1.25%; min-height: 58px; } .form-style-9 ul li .field-style{ box-sizing: border-box; padding: 8px; outline: none; border: 1px solid #B0CFE0; } .form-style-9 ul li .field-style:focus{ box-shadow: 0 0 5px #B0CFE0; border:1px solid #B0CFE0; } .form-style-9 ul li .field-split{ width: 49%; } .form-style-9 ul li .field-split25{ /* float: left; width: 24%; margin-right: 1.25%;*/ height: 40px; } .form-style-9 ul li .field-split25-4{ /*float: left; width: 24%; margin-right: 0;*/ height: 40px; } .form-style-9 ul li .field-full{ width: 100%; } .form-style-9 ul li input.align-left{ /*float:left;*/ } .form-style-9 ul li input.align-right{ float:right; } .form-style-9 ul li textarea{ width: 100%; height: 100px; } .form-style-9 ul li input[type="button"], .form-style-9 ul li input[type="submit"] { box-shadow: inset 0px 1px 0px 0px #3985B1; background-color: #216288; border: 1px solid #17445E; display: inline-block; cursor: pointer; color: #FFFFFF; padding: 8px 18px; text-decoration: none; font: 12px Arial, Helvetica, sans-serif; } .form-style-9 ul li input[type="button"]:hover, .form-style-9 ul li input[type="submit"]:hover { background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%); background-color: #28739E; } .formcol{ float: left; padding: 2px; } .formcol label { font-weight: bold; display:block; } ul { margin: 0; padding: 0; list-style-type: none; } .test { margin-right: 1.25%; margin-bottom: 1.25%; } .image-div { margin-right: 4%; float:right; width: 200px; height: 200px; } .image-upload { float:right; width: 100%; margin-right: 1.25%; margin-bottom: 1.25%; } .image-preview { float:right; width: 150px; height: 150px; margin-right: 1.25%; margin-bottom: 1.25%; position:relative; border: 1px solid #B0CFE0; } .test4 { float:left; width: 23%; margin-right: 0; margin-bottom: 1.25%; } .test-label { width: 23%; margin-right: 1.25%; margin-bottom: 0px; padding:0px; font-weight: bold; } .test-label1 { width: 23%; margin-right: 1.25%; margin-bottom: 0px; padding:0px; } .removeRow{ height:auto; width:auto; max-width:12px; max-height:12px; } .div-format-30 { width: 90%; margin-right: 1.25%; margin-bottom: 0; margin-top: 1.25%; border: 1px solid #B0CFE0; } .div-format-30 td{ margin-top:20px; float:left; width: 90%; margin-right: 1.25%; margin-bottom: 0; margin-top: 1.25%; border: 1px solid #B0CFE0; } .split33 { float:left; width: 28%; margin-right: 1.25%; margin-bottom: 1.25%; } .split33right { float:right; width: 23%; margin-right: 0; margin-bottom: 1.25%; } .div-format { font-size:12px; float:left; width: 23%; margin-right: 1.25%; margin-bottom: 1.25%; border: 1px solid #B0CFE0; } .test4 { float:left; width: 23%; margin-right: 0; margin-bottom: 1.25%; } .header { float:left; width: 100%; margin-right: 1.25%; margin-bottom: .25%; } label { display: block; text-align: center; } input { width: 100%; } .form-style-9 ul li input[type="submit"] { width: 10%; } .resume-title { color: #af5d86; } .container { margin-left: 2%; margin-right: 2%; } .personal-details { padding-bottom:1.25%; } .col{ float: left; width: 23%; margin-right: 1.25%; margin-bottom: 1.25%; border: 1px solid #c2c2c2; padding: 1%; } 

Answer 4

You must do this:

1) make li vertical and modify the content in your example to define it vertically.

2), but id for all li and in css makes the border like this

 <li id='first-column'> any thing</li> <li id='second-column'> any thing</li> 

css =>

 #first-column { border:1px red solid; } #second-column { border:1px blue solid; }