Still struggling with form positioning

I want to align two <select> lists next to each other without using table layout.

I’d like them to be even spaced across the form.

I’m not sure how to put space between them without using absolute positioning or a bunch of non-breaking spaces, neither of which seems very elegant.

Inline position pushes them up against each other.

I have similar issues trying to position two <input> tags, across a form.

I notice that most people simply line form elements up vertically. This works, but gets a bit out of hand when there are two many form elements.

I find myself reverting back to table layout to get forms to look the way I want them to look.

Can anyone help me with this? Either with suggestions or pointing me to a good resource.

Thanks,

–Kenoli

My two preferred methods are float: left or display: inline-block. Feel free to post your code or a link to what you have, and maybe a screen shot of what you are aiming for (we need to know where things are meant to go). You certainly don’t need a table for this. :slight_smile:

OK. Below is some code using inline-block. Is the idea here that I use a margin like I have here to locate the second <select> group in relation to the first? I suppose I don’t really need to float the first select group or assign an inline-block display to it. An option, I presume would be to float one left and one right. Margins could also adjust how close to the right margin the one floated right goes.

Am I getting the idea?

–Kenoli

<html>
<head>
<title></title>

<style text/css>
	
#series {
	float: left;
	display: inline-block;
}

#series2 {
	margin-left: 150px;
	display: inline-block;
}
	
	
</style>


</head>
<body>

<select id="series">
<option value="1" onclick="[ajax function]">First</option>
<option value="2" onclick="[ajax function]">Second</option>
<option value="3" onclick="[ajax function]">Third</option>
<option value="4" onclick="[ajax function]">Fourth</option>
<option value="5" onclick="[ajax function]">Fifth</option>
<option value="6" onclick="[ajax function]">Sixth</option>
</select>


<select id="series2">
<option value="1" onclick="[ajax function]">First</option>
<option value="2" onclick="[ajax function]">Second</option>
<option value="3" onclick="[ajax function]">Third</option>
<option value="4" onclick="[ajax function]">Fourth</option>
<option value="5" onclick="[ajax function]">Fifth</option>
<option value="6" onclick="[ajax function]">Sixth</option>
</select>


</body>
</html>

That looks fine to me, although you don’t need float and inline-block together … just choose one or the other.

In terms of getting this to play nicely with the rest of your form elements, though—and assuming you use floats—it might be better to wrap these two selects in a containing div with overflow: hidden; so that other form elements don’t fall out of position around the floated items.