Positioning Elements using CSS/DHTML

[cheapterp]

Hi,

I have a form that has a bunch of cascading drop downs - something like Country->State->City->. Each subsequent drop down is populated based on what is selected on the preceding one.

What I am having trouble with is the positioning of the labels for these dropdowns. For ex., I want the word 'Country' written over the Country dropdown, the word 'State' over the State dropdown and so on. Unfortunately, anything I try doesn't seem to work. I have used every CSS property I thought would help - margin, position, padding etc., but nothing works.

The problem is when I resize the window the labels and the dropdowns are thrown out of whack and it becomes difficult to figure out just by looking which label belongs to which dropdown box. How do I fix this and make the position of the form elements independent of the size of the window?

Thanks!

[sgweaver]

Is there somewhere that I can take a look at the problem? Are you wanting them to stack vertically?

[almostbob]

<style>
.left {width:33%; float:left; text-align:left;}
</style>
<div class='left' >
<label for='country'>Country</label><br/>
<select onchange='javascript populate state-province selector' name='country' id='country'>
<option selected='selected' value="">Choose</option>
<option value='the lucky country'>Australia</option>
<option value='winter home for hockey'>Canada</option>
<option value='strange'>America</option>
<option value='I like the feel of tulips'>Nederlands</option>
</select>
</div>
<div class='left'>
<label for='state'>State/Province</label><br>
<select id='state' name='state' onchange='javascript populate city selector'>
<option value="">Select Country First</option>
</select>
</div>
<div class='left'>
<label for='city'>City</label><br>
<select id='city' name='city'>
<option value="">Select Country First</option>
</select>
</div>

[cheapterp]

Is there somewhere that I can take a look at the problem? Are you wanting them to stack vertically?

Here's an example of a simpler 3-dropdown box form with which I am struggling with the positioning.

I wanna arrange the 3 drop down boxes next to each other, but their labels should be exactly above the respective 'selects'. The problem I am having is that when I resize the window, the labels and the select boxes do not line up with each other.

(The code below does not reflect what I had when I first posted here. I've done a lot of chopping and changing with it since then. But this is what I have as of now.)
--------------------------------------------------------------------------------------

<div align="center"style="margin-left:2%; color:#333333; font-family:Arial, Helvetica, sans-serif; font-weight:600">
	<div align="center" style="margin-left:3%;">
		<label style="padding:0.1%; margin-left:0.5%; margin-right:0.3%; text-align:center">Temp ID</label><br />
		<select name="temp_IdDropDown" style="margin-right:0.7%">
		       <option value="1">1</option>
                       <option value="2">2</option>
			<option value="3">3</option>
		</select>
	</div>
				
	<div>
		<label style="padding:3%; margin-left:1.5%; padding-right:1%; text-align:right ">Last Name</label><br />
		<select name="lastNameDropDown" style="margin-right:0.8%">
			<option value="LastName1">LastName1</option>
			<option value="LastName2">LastName2</option>
			<option value="LastName3">LastName3</option>
		</select>
	</div>
			
	<div>
		<label style="margin-left:4%;">First Name</label><br />
		<select name="firstNameDropDown">
			<option value="FirstName1">FirstName1</option>
			<option value="FirstName2">FirstName2</option>
			<option value="FirstName3">FirstName3</option>
		</select>
	</div>
		<br />

	<div align="center">
		<input type="submit" name="search" id="search" value="Search" />
		<input type="reset" name="resetForm" id="resetForm" value="Reset" />
	</div>
</div>

[almostbob]

<div style=" text-align:center; margin-left:2%; color:#333333; font-family:Arial, Helvetica, sans-serif; font-weight:600">
<div style="margin-left:3%; text-align:center;">
<label for='temp_IdDropDown'>Temp ID</label><br />
<select name="temp_IdDropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div style='text-align:right;'>
<label for='lastNameDropDown'>Last Name</label><br />
<select name="lastNameDropDown">
<option value="LastName1">LastName1</option>
<option value="LastName2">LastName2</option>
<option value="LastName3">LastName3</option>
</select>
</div>
<div>
<label for='firstNameDropDown'>First Name</label><br />
<select name="firstNameDropDown">
<option value="FirstName1">FirstName1</option>
<option value="FirstName2">FirstName2</option>
<option value="FirstName3">FirstName3</option>
</select>
</div>
<br />
<div style="text=align:center;">
<input type="submit" name="search" id="search" value="Search" />
<input type="reset" name="resetForm" id="resetForm" value="Reset" />
</div>
</div>

if you position every element separately, they dont line up
.3 % of 200px part screen window is 0.6px
.8 % of 200px ditto is 1.6px
.3 % of 2160px full screen window is 6px
.8 % ditto is 18px
position the container

[sgweaver]

Here is your code reworked with some of almostbob's advice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<title>daniweb_2009-04-30</title>
<style type="text/css">
body { 
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	}
#pagecontainer { 
	width:800px;
	}
#formcontainer { 
	text-align:left;
	font-weight:bold;
	}
select { 
	text-align:left; 
	width:10em;
	margin-bottom:10px;
	}
label { 
	text-align:left; 
	width:30em;
	}
</style>
</head>

<body>
<div id="pagecontainer">
	<div id="formcontainer">
		<label for="temp_IdDropDown">Temp ID</label><br />
		<select name="temp_IdDropDown">
		    <option value="1">1</option>
            <option value="2">2</option>
			<option value="3">3</option>
		</select><br />
		<label for="lastNameDropDown">Last Name</label><br />
		<select name="lastNameDropDown">
			<option value="LastName1">LastName1</option>
			<option value="LastName2">LastName2</option>
			<option value="LastName3">LastName3</option>
		</select><br />
		<label for="firstNameDropDown">First Name</label><br />
		<select name="firstNameDropDown">
			<option value="FirstName1">FirstName1</option>
			<option value="FirstName2">FirstName2</option>
			<option value="FirstName3">FirstName3</option>
		</select><br />
		<input type="submit" name="search" id="search" value="Search" />
		<input type="reset" name="resetForm" id="resetForm" value="Reset" />
	</div>
</div>
</body>
</html>

Like he said, you need to position the container. Play with changing the alignment of the css in the head of this document.

[cheapterp]

Thanks almostbob and sgweaver for your help. I am almost there and a little more experimenting with the CSS should get me through!