How to format HTML with CSS for column layout

Question

I'm trying to do some simple HTML and CSS to get a page to layout something like the image below, but I'm way out of my element and not even sure how to get it started. Right now, my biggest problem is I can't get the Client Birth Date, and Spouse First Name to appear on its own line. I feel like I could add divs, but then I'd probably have divs everywhere (I'm assuming that's a bad thing.)

Here's a JSFiddle of what I have started.

<div>
  <label for="WebName">Name</label>
  <input type="text" id="WebName" />
</div>
<div>
  <label for="WebEmail">Email</label>
  <input type="text" id="WebEmail" />
</div>
<div>
  <label for="WebPhone">Phone</label>
  <input type="text" id="WebPhone" />
</div>

<hr />

<div style="border: 1px solid black; overflow: hidden;">
  <!-- left -->
  <div style="width: 500px; float:left; border: 1px solid red;">
    <label for="ClientFirstName">Client First Name*</label>
    <input type="text" id="ClientFirstName" />

    <label for="ClientBirthDate">Client Birth Date</label>
    <input type="text" id="ClientBirthDate" />

  </div>

  <!-- right -->
  <div style="float:left; width: 500px; border: 1px solid green;">
    <label for="ClientLastName">Client Last Name*</label>
    <input type="text" id="ClientLastName" />
    <label for="ClientAge">Client Age</label>
    <input type="text" id="ClientAge" />
  </div>
</div>

<hr />

<div>
  <label for="AppointmentDate">Appointment Date</label>
  <input type="text" id="AppointmentDate" />
  <label for="Goals">Goals</label>
  <textarea id="Goals" rows="4" cols="80">
                </textarea>
</div>

Bryce Howitson · Accepted Answer · 2019-02-22 16:42:06Z

1

I would add divs in those specific cases. Form elements can be messy when it comes to layout. I've found that wrapping a label + input inside a div is the best practice here. And since you've already done that in the first section you might as well follow the pattern.

<div class="inputWraper">
 <label for="thisInputName">Some Text</label>
 <input type="text" name="thisInputName" value="" placeholder="What displays />
</div>

You could technically also wrap everything in the label instead of a div. This has some pros and cons mostly in that it makes everything clickable and adds focus. It's especially good for checkboxes and radio buttons as the hit area is bigger.

<label for="thisInputName">
 <span>Your label text</span>
 <input type="text" name="thisInputName" value="" placeholder="What displays />
</label>

answered Feb 22, 2019 at 16:42

Bryce Howitson

7,78824 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to format HTML with CSS for column layout

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related