Hi @Peter_1985 ,
Thanks for reaching out.
Building a three-column layout is a frequent task in web development, and CSS is the ideal tool for it. Modern approaches like CSS Flexbox and CSS Grid offer flexible, efficient ways to create layouts compared to older techniques like floats. You can use either Flexbox or Grid to organize the three sections as depicted in your image.
Here are some useful resources to get started:
- W3Schools CSS Grid Tutorial: Provides straightforward examples to understand Grid basics.
- CSS-Tricks Flexbox Guide: A thorough resource for learning Flexbox.
- CSS-Tricks Grid Guide: An in-depth reference for mastering CSS Grid.
Both Flexbox and Grid are excellent for creating responsive, well-structured layouts for your form.
Here's a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 20px auto;
}
.section {
flex: 1;
margin: 0 10px;
padding: 20px;
border: 2px solid red;
box-sizing: border-box;
}
.section h2 {
margin-top: 0;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-group input[type="radio"] {
width: auto;
margin-right: 10px;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<h2>Personal Details</h2>
<div class="form-group">
<label>Full Name</label>
<input type="text">
</div>
<div class="form-group">
<label>Date of Birth</label>
<input type="date" placeholder="mm/dd/yyyy">
</div>
<div class="form-group">
<label>Gender</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Other
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email">
</div>
</div>
<div class="section">
<h2>Address & Employment</h2>
<div class="form-group">
<label>Current Address</label>
<input type="text">
</div>
<div class="form-group">
<label>Permanent Address</label>
<input type="text">
</div>
<div class="form-group">
<label>Occupation</label>
<input type="text">
</div>
<div class="form-group">
<label>Company Name</label>
<input type="text">
</div>
<div class="form-group">
<label>Work Email</label>
<input type="email">
</div>
</div>
<div class="section">
<h2>Emergency Contact & Notes</h2>
<div class="form-group">
<label>Contact Name</label>
<input type="text">
</div>
<div class="form-group">
<label>Relation</label>
<input type="text">
</div>
<div class="form-group">
<label>Contact Number</label>
<input type="tel">
</div>
<div class="form-group">
<label>Additional Notes</label>
<input type="text">
</div>
</div>
</div>
<button>Submit Form</button>
</body>
</html>
Hope this helps! If you agree with my answer, feel free to interact with the system accordingly!