Problem aligning a row of form elements

Question

JimmyLloyd 0 Newbie Poster

16 Years Ago

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

html-css web-design

4 Contributors
4 Replies
104 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by Member #120589

Dani AI

Generated 10 Months Ago

A few focused points to get the textarea sitting neatly to the right of the three rows of selects, without moving the selects around:

Simplify the markup (as suggested). Put the six selects into a left column and the textarea in a sibling right column. Too many nested divs and floating elements are the usual cause of alignment headaches.
Use a two‑column CSS Grid or Flexbox layout so the right column can naturally span the height of the left column. This avoids float-clearing problems and makes alignment predictable across browsers (tables work, but modern CSS is easier to maintain).
Watch for widths and box-sizing: a fixed select width wider than its column will force wrapping or push the textarea down. Prefer max-width or percentage widths and use box-sizing:border-box so padding doesn’t break your layout.

Minimal example (structure only — replace the selects with your server output):

<form class="meal-form">
  <div class="selects">
    <div class="pair"><select></select><select></select></div>
    <div class="pair"><select></select><select></select></div>
    <div class="pair"><select></select><select></select></div>
  </div>
  <div class="notes">
    <textarea name="notes"></textarea>
  </div>
</form>

.meal-form { display: grid; grid-template-columns: 1fr 320px; gap:12px; align-items:start; }
.selects { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 12px; }
.notes textarea { width:100%; height:100%; min-height:10rem; box-sizing:border-box; resize:vertical; }

Practical troubleshooting:

Inspect computed widths in devtools and look for any floating element still present.
If selects overflow, reduce their max-width or put them inside a wrapper with overflow hidden.
If supporting very old browsers, Flexbox is a good fallback; otherwise Grid is the cleanest for a two-dimensional layout.

For reference on modern layout techniques see MDN on CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.

This approach preserves the simplified markup recommended by , avoids the presentational table debate raised by , and addresses the sizing concerns mentioned by recommending sensible width rules and box-sizing.

All 4 Replies

colweb 13 Posting Whiz

16 Years Ago

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>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

almostbob 866 Retired: passive income ROCKS · Answer 1 · 2010-03-28T02:29:44+00:00

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 13 Posting Whiz · Answer 2 · 2010-03-28T07:46:27+00:00

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

when you get over a cvouple of hundred, you too can indulge yourself in your pet peeve occassionaly, until then, **expletive deleted** yourself

Member #120589 · Answer 3 · 2010-03-31T04:09:50+00:00

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.

Problem aligning a row of form elements

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers