How to create a two column layout form? - html

Question

Am I missing something here? Or is this not the right way to go about it? Please help me, have a look at this and tell me what's wrong here
/*--- FORM ----*/
.form-container {
width: 100%;
}
.form-container li {
display: block;
float: left;
width: 100%;
margin: 0 auto;
}
input,
select,
textarea {
width: 60%;
}
label {
text-align: left;
margin-left: 18px;
font-size: 100%;
}
<div class="row">
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="first-name">First name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="first-name" id="first-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="last-name">Last name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="last-name" id="last-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="business-email">Business email:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="email" name="business-email" id="business-email" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="phone-number">Phone number:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="phone-number" id="phone-number" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="company-name">Company name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="company-name" id="company-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="cosize">Company size:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="cosize" id="cosize">
<option value="small" selected>1-100</option>
<option value="medium">101-2000</option>
<option value="large">2001+</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>How did you find us? :</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="find-us" id="find-us">
<option value="search" selected>Search engine</option>
<option value="friends">Friends</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>Tell us what you wnat here</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<textarea name="message"></textarea>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="submit" value="Send message">
</li>
</ul>
</div>
</div>
</form>
</div>
I have used the codes in my stylesheet to try and create a 2 column layout form, but it still doesn't work. Am i doing anything wrong here?
Am i missing something out, please help with this!

Answer 1

I've created a example for you using flexbox
I have removed your first row since you didn't need that and added css to the form and .row
/*--- FORM ----*/
.form-container {
width: 100%;
}
.form-container li {
display: block;
float: left;
width: 100%;
margin: 0 auto;
}
input,
select,
textarea {
width: 60%;
}
label {
text-align: left;
margin-left: 18px;
font-size: 100%;
}
form {
display: flex;
flex-wrap: wrap;
}
form .row {
width: 50%;
}
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="first-name">First name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="first-name" id="first-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="last-name">Last name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="last-name" id="last-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="business-email">Business email:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="email" name="business-email" id="business-email" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="phone-number">Phone number:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="phone-number" id="phone-number" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="company-name">Company name:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="text" name="company-name" id="company-name" required>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label for="cosize">Company size:</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="cosize" id="cosize">
<option value="small" selected>1-100</option>
<option value="medium">101-2000</option>
<option value="large">2001+</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>How did you find us? :</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<select name="find-us" id="find-us">
<option value="search" selected>Search engine</option>
<option value="friends">Friends</option>
<option value="ad">Advertisement</option>
<option value="other">Other</option>
</select>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label>Tell us what you wnat here</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<textarea name="message"></textarea>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="form-container">
<li class="form-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="form-container">
<li class="form-features">
<input type="submit" value="Send message">
</li>
</ul>
</div>
</div>
</form>