HTML form separate columns with borders - css

Question

I have 4 columns and I need separate each column with borders. It looks like now:
How It should be (red/blue colors just for example):
Problem Is that I don't have any div for columns, I generating rows inside <li> </li> so 4 inputs inside <li> </li> is 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's type</label>
<input id="Vesselstype" type="text" name="Vesselstype" class="field-style field-split25 align-left" placeholder="Vessel's 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>
Have you any ideas how can I achieve that? Here is FIDDLE

Answer 1

If to keep your existing markup, here is an option (though you might need to adjust the values a little)
To be noted, having a <div id="personal-details"> as a direct child of ul is invalid markup and should be removed. You can put the id on the ul instead.
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 2

If you strongly need to keep it as row-wise, you have the option of using absolutely positioned, 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
Please note that you should not put divs directly inside ul so this is incorrect:
<ul>
<div>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</div>
</ul>
Note2
That would be a better practice if you produce them, column-wise, so that way you don't need 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>
Solution
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 3

You can try to change that in following way.
<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 to do this :
1) make li vertical and change content in your example to specific it vertically .
2) but id to all li and in css make 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; }