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> 

Answer 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>