Problem aligning a row of form elements

[JimmyLloyd]

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	{
			
}

[colweb]

What a lot of div's. Below some code that does what I think you want to have, the select boxes in 3 rows with 2 items per row, and next to it a textbox. To keep it simple I removed all php code from it and as you can see, removed some classes as well. To use it, you will have to re-examine your php code.

<html>
<head>
	<style type="text/css">
		.mealDiv {font:Tahoma, Geneva, sans-serif; margin:10px; padding:10px;}
		.foodClassSelect {height:22px; width:225px;}
		.foodNameSelect	{height:22px;}
		.mealNotes {height:80px; width:444px;}
		.classSelectDiv	{float:left;}
		.foodNotesDiv	{float:left;}
	</style>
</head>

<body>
	<form id="dayplan" name="dayplan" action="" method="post">
		<div class="mealDiv">
			<div>
				Meal #1
			</div>
			<div class="classSelectDiv">
				<div>
					<select class="foodClassSelect" name="mealSelect1">
						<option value="" selected="selected">food</option>
					</select>
					<select id="foodDiv1" class="foodNameSelect" name="meal">
						<option value="" selected="selected">empty</option>
					</select>
				</div>
				<div>
					<select class="foodClassSelect" name="mealSelect2">
						<option value="" selected="selected">food</option>
					</select>
					<select id="foodDiv2" class="foodNameSelect" name="meal">
						<option value="" selected="selected">empty</option>
					</select>
				</div>
				<div>
					<select class="foodClassSelect" name="mealSelect3">
						<option value="" selected="selected">food</option>
					</select>
					<select id="foodDiv3" class="foodNameSelect" name="meal">
						<option value="" selected="selected">empty</option>
					</select>
				</div>
			</div>
			<div class="foodNotesDiv">
				<textarea class="mealNotes" name="notes"></textarea>
			</div>
		</div>
	</form>
</body>
</html>

[almostbob]

pet peeve [rant]
Try hard to remove the pixels from your css definitions
modern monitors have a dot pitch of 0.22mm (.008inch) [and the dot pitch only gets smaller with each generation]

22px in a .22mm dot pitch is a div size one eighth inch tall
80px gives a div size six tenths of an inch tall,
probably not what is desired,

ems and % are the current best practice for screen layout, a div height 2em is twice the size of the current font. also makes the site user friendly, disability friendly, as the element size adjusts to user preference
[/rant] end pet peeve

[colweb]

pet peeve [rant]
Try hard to remove the pixels from your css definitions
modern monitors have a dot pitch of 0.22mm (.008inch) [and the dot pitch only gets smaller with each generation]

22px in a .22mm dot pitch is a div size one eighth inch tall
80px gives a div size six tenths of an inch tall,
probably not what is desired,

ems and % are the current best practice for screen layout, a div height 2em is twice the size of the current font. also makes the site user friendly, disability friendly, as the element size adjusts to user preference
[/rant] end pet peeve

And your contribution does solve JimmyLloyd problem??? The question here is not about px versus em versus %. Replace all px in his css with em and the text box is still under the select boxes.
See that you have solved > 200 threads. But to solve this one you have to come with something better...

For the life of me, I can't see why you're using so many nested divs. They seem to be placed for presentational reasons. If so, get rid of them! But i'm going to suggest a different markup for presentational reasons! What a hypocrite!

Now, don't shoot me - you could use, dan dan daaah! - a table.

<table width="95%"  border="1" cellspacing="2" cellpadding="2">
  <tr>
    <td>title1</td>
    <td>title2</td>
    <td>title3</td>
    <td>textareatitle</td>
  </tr>
  <tr>
    <td>...dropdown1...</td>
    <td>...dropdown2...</td>
    <td>...dropdown3...</td>
    <td rowspan="5"><textarea></textarea></td>
  </tr>
  <tr>
    <td>title4</td>
    <td>title5</td>
    <td>title6</td>
  </tr>
  <tr>
    <td>...dropdown4...</td>
    <td>...dropdown5...</td>
    <td>...dropdown6...</td>
  </tr>
  <tr>
    <td>title7</td>
    <td>title8</td>
    <td>title9</td>
  </tr>
  <tr>
    <td>...dropdown7...</td>
    <td>...dropdown8...</td>
    <td>...dropdown9...</td>
  </tr>
  </table>

Some will poo-poo the use of tables for presentation - they should only be used for data! Well, yes strictly speaking that's true, but your CSS can become unravelled pretty quickly especially when looking for browser compatibility. Form placement is the one occasion that I make a concession to tables vs. pure CSS.