Horizontally align divs in separate columns - html

Question

One of our forms has two columns set up approximately as it is below (edited a number of input fields out since it's a rather large form). The user needs to be able to tab from the top of the left column all the way to the bottom, then back up to the top of the right column and again down to the bottom.
I have the form set up using two divs, one for each column (left/right). However, this has the effect of throwing the fieldsets out of whack horiztonally like so:
Keeping in mind the requirement that the user must be able to tab from top to bottom in each column, how would I adjust the CSS/general set up so that the fieldsets align horiztonally.
For example, in this fiddle Producer Info and Address Info are aligned properly, however I'd like Basic Info to horizontally align with Territory Info.
HTML
<div id="BigDiv" style="clear:both;display:inline;">
<div id="LeftDiv" style="width:450px;float:left;">
<fieldset style="width: 400px;" >
<legend>Produer Info</legend>
<div class="M-editor-label">
Producer Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="width: 400px;" >
<legend>Basic Info</legend>
<div class="M-editor-label">
First Name
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
LastName
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
<div id="RightDiv" style="width: 450px; float:right">
<fieldset style="width: 400px;" >
<legend>Address Info</legend>
<div class="M-editor-label">
Home
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
Business
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="width: 400px;" >
<legend>Territory Info</legend>
<div class="M-editor-label">
Territory Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
</div>
CSS
.M-editor-label
{
clear: both;
}
.M-editor-label
{
float: left;
margin: 1em 0 0 0;
}
.M-editor-field
{
float: right;
margin: 0.5em 0 0 0;
color: Black;
}
.M-editor-field-xtraspace
{
float: right;
margin: 0.5em 0 20 0;
color: Black;
}

Answer 1

As Basic Info and Territory Info are within two different div, their alignment can't be dependent on each other. Their alignment is affected only by their sibling like Producer info for Basic info and Address info for Territory info.
So, you need to manually give margin-top to the Basic Info so that it is at proper height from top matching that of Territory info.
Here's its fiddle: http://jsfiddle.net/mb2x8e68/
<div id="BigDiv" style="clear:both;display:inline;">
<div id="LeftDiv" style="width:450px;float:left;">
<fieldset style="width: 400px;" >
<legend>Produer Info</legend>
<div class="M-editor-label">
Producer Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="margin-top:35px;width: 400px;" >
<legend>Basic Info</legend>
<div class="M-editor-label">
First Name
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
LastName
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>
<div id="RightDiv" style="width: 450px; float:right">
<fieldset style="width: 400px;" >
<legend>Address Info</legend>
<div class="M-editor-label">
Home
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
<div class="M-editor-label">
Business
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
<fieldset style="width: 400px;" >
<legend>Territory Info</legend>
<div class="M-editor-label">
Territory Type
</div>
<div class="M-editor-field">
<input type="text"/>
</div>
</fieldset>
</div>

Answer 2

I don't believe that you can achieve what you want without setting a fixed height to your elements. Adding the following to your CSS will ensure that all your fieldsets are aligned properly. Keep in mind that you will have to account for the largest sized box.
fieldset{ height:100px;}