I'm basically making a form (screenshot: http://mason.gmu.edu/~vnguyenl/form.jpg) where there are 2 columns. The label column and the input column. The label side is in a div that has its own bg color, and same with the input field side. I'm trying to make it so that if there's to much text on one side than the other column will match it's height. Right now, if one side is larger than the other, there are gaps. Would appreciate any help! Thanks.
The html for the form looks like the following:
<div class="formRow">
<div class="labelColumn">Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: Last Name: <span class="required">*</span></div>
<div class="contentcolumn">
<input class="textBox300" type="text" id="last_name" tabindex="1" />
</div>
</div>
The css is the following:
#pt-profile-form .labelColumn, .labelColumn2 {
font-weight:bold;
float:left;
width:300px; /* Width of left column */
margin-left:0px;
background:#f0f4f7;
text-align:left;
padding:5px;
padding-left:14px;
display:block;
white-space:normal;
position:relative;
clear:both;
}
#pt-profile-form .formRow { clear:both; height:100%; }
#pt-profile-form .contentcolumn, .contentcolumn2 {
margin-left:320px; /* Set left margin to LeftColumnWidth */
background-color:#eae9d7;
padding:5px;
text-align:left;
vertical-align:middle;
position:relative;
}
#pt-profile-form .labelColumn, .contentcolumn {
/*height:30px;*/
min-height:30px;
height:100%;
}
#pt-profile-form .labelColumn2, .contentcolumn2 { /* column properties for <textarea> */
/*height:100px;*/
height:100%;
}
See Question&Answers more detail:os