Hey there, I've been working on a form that uses ajax to use the selection in one box, and update the second box accordingly.
My problem is with the form layout, with which i'm not very good. I've managed to get the layout how I want it so far, with 3 rows, each containing 2 select boxes and a text area beneath everything.
I've decided that I'd like the text area up on the right side of the rows of selects. The issue is, that everything i seem to try to get the text area up there either sends the select boxes all over the place, or throws the text area to the right but its all out of alignment.
Any help I could get on this one would be awesome, I always seem to struggle with design aspects.
Thanks so much.
Here's my HTML, and I'll toss my CSS below it.
<FORM ID="dayplan" NAME="dayplan" ACTION="" METHOD="post">
<div class="mealDiv">
Meal #1
<div class="selectGroup">
<div class="mealItem">
<div CLASS="classSelectDiv">
<select CLASS="foodClassSelect" name="mealSelect1" onchange="getData('populatefoods.php?id='+document.dayplan.mealSelect1.value, 'foodDiv1')">
<option value="" selected="selected">Select a food class.</option>
<?php populateSelect(class_id, class_name, food_classes) ?>
</select>
</div>
<div CLASS="foodSelectDiv" id="foodDiv1">
<select CLASS="foodNameSelect" name="meal">
<option value="" selected="selected"></option>
</select>
</div>
</div>
<div class="mealItem">
<div CLASS="classSelectDiv">
<select CLASS="foodClassSelect" name="mealSelect2" size="1" onchange="getData('populatefoods.php?id='+document.dayplan.mealSelect2.value, 'foodDiv2')">
<option value="" selected="selected">Select a food class.</option>
<?php populateSelect(class_id, class_name, food_classes) ?>
</select>
</div>
<div CLASS="foodSelectDiv" id="foodDiv2">
<select CLASS="foodNameSelect" name="meal" size="1" onchange="">
<option value="" selected="selected"></option>
</select>
</div>
</div>
<div class="mealItem">
<div CLASS="classSelectDiv">
<select CLASS="foodClassSelect" name="mealSelect3" size="1" onchange="getData('populatefoods.php?id='+document.dayplan.mealSelect3.value, 'foodDiv3')">
<option value="" selected="selected">Select a food class.</option>
<?php populateSelect(class_id, class_name, food_classes) ?>
</select>
</div>
<div CLASS="foodSelectDiv" id="foodDiv3">
<select CLASS="foodNameSelect" name="meal" size="1" onchange="">
<option value="" selected="selected"></option>
</select>
</div>
</div>
</div>
<div class="foodNotesDiv">
<textarea class="mealNotes" name="notes"></textarea>
</div>
</div>
</FORM>
Here's my CSS
.mealDiv {
font:Tahoma, Geneva, sans-serif;
margin:10px;
padding:10px;
}
.selectGroup {
background:#e4f1fd;
width:50%;
}
.foodClassSelect {
height:22px;
width:225px;
}
.foodNameSelectPopulated {
height:22px;
width:225px;
}
.foodNameSelect {
height:22px;
}
.mealNotes {
height:80px;
width:444px;
}
.classSelectDiv {
float:left;
}
.foodSelectDiv {
}
.foodNotesDiv {
}