Form layout issue

Question

Form layout issue

Peter_1985 2,786

Hi,

Any existing form sample to have the 3 parts below on a form that we can have the different details inside each?

User's image

KaushaL ™ 0 Reputation points

2025-08-08T11:33:25.53+00:00

Like in this manner?
Peter_1985 2,786 Reputation points

2025-08-09T04:58:01.9666667+00:00

Yes, more details to share, for the one above? Many thanks.

Viorel 123.5K

An example like this?

<style>
    table
    {
        border-spacing: 4pt;
        border-collapse: separate;
        width: 100%
    }

    td
    {
        border: 2pt solid red
    }
</style>
<table>
    <tr>
        <td style="width: 20%">
            Left panel...<br />
            <br />
            <br />
        </td>
        <td style="width: 60%">
            Central panel...<br />
            <br />
            <br />
        </td>
        <td style="width: 20%">
            Right panel...<br />
            <br />
            <br />
        </td>
    </tr>
</table>

Peter_1985 2,786 Reputation points

2025-08-09T14:57:35.1566667+00:00

Many thanks to all.

Viorel,

I need 3 separate parts and each part can be a container right? The one on the left is for the relevant pictures, the middle one is having the discussion details, while the right one is having different status.

2 answers

Your answer

KaushaL ™ 0 Reputation points

2025-08-08T11:33:25.53+00:00

Like in this manner?
Peter_1985 2,786 Reputation points

2025-08-09T04:58:01.9666667+00:00

Yes, more details to share, for the one above? Many thanks.
Viorel 123.5K Reputation points

2025-08-09T12:17:55.78+00:00

An example like this?

<style> table { border-spacing: 4pt; border-collapse: separate; width: 100% } td { border: 2pt solid red } </style> <table> <tr> <td style="width: 20%"> Left panel...<br /> <br /> <br /> </td> <td style="width: 60%"> Central panel...<br /> <br /> <br /> </td> <td style="width: 20%"> Right panel...<br /> <br /> <br /> </td> </tr> </table>
Peter_1985 2,786 Reputation points

2025-08-09T14:57:35.1566667+00:00

Many thanks to all.

Viorel,

I need 3 separate parts and each part can be a container right? The one on the left is for the relevant pictures, the middle one is having the discussion details, while the right one is having different status.

Answer 1

Creating a three-column layout is a common task in web development, and CSS is the perfect tool for the job.

If you're using CSS, there are a few excellent ways to achieve this. The most modern and flexible methods use CSS Flexbox or CSS Grid. Both are designed to make building complex layouts much simpler than older methods like using floats.

Here are some excellent resources to get you started with both approaches:

Flexbox and Grid Resources

W3Schools CSS Grid Layout: This is a fantastic resource with simple examples you can copy and paste to see how it works. It's a great place to start learning about the power of the grid.

https://www.w3schools.com/css/css_grid.asp

CSS-Tricks: A Complete Guide to Flexbox: This is a comprehensive guide to everything you need to know about Flexbox. CSS-Tricks is a trusted name in web development tutorials, and this guide is a goldmine.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS-Tricks: A Complete Guide to Grid: Similar to their Flexbox guide, this is the ultimate reference for using CSS Grid. It breaks down every property with clear examples.

https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 2

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!

Share via

Form layout issue

2 answers

Your answer