asked on

CSS Question - Align Listbox with Label

Hello all,

I have a simple CSS question. I have a panel and within that panel I want to align in a div tag etc. I want two listboxes side by side and then above each listbox a label. The listboxes are 200px wide each. I don't want to use tables anymore and widths etc. I want to use all CSS. Can someone show me an example on how to line these up? I don't want to use top because I am making certain panels visible and not visible etc. so not sure that would work.

ASKER CERTIFIED SOLUTION

nap0leon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nap0leon

If you don't want to use fieldsets and legends, here is the same thing, but with just "Label goes here<br/>"

<style>
#wrapper {width: 500px; margin: 0 auto;}
.listwrapper {width:240px; float:left}
</style>
<body>
<div id="wrapper">
	<div class="listwrapper">
		Label Goes Here:<br/>
		<select name="sample-select-box1" id="sample-select1" size="1">
			<option value=""> </option>
			<option value="INDIA">India</option>
			<option value="AMERICA">America</option>
			<option value="AFRICA">Africa</option>
			<option value="SRIKLANKA">Srilanka</option>
		</select>
	</div>
	<div class="listwrapper">
		Label Goes Here:<br/>
		<select name="sample-select-box2" id="sample-select2" size="1">
			<option value=""> </option>
			<option value="INDIA">India</option>
			<option value="AMERICA">America</option>
			<option value="AFRICA">Africa</option>
			<option value="SRIKLANKA">Srilanka</option>
		</select>
	</div>
</div>
</body>

Open in new window

sbornstein2

ASKER

This looks good but the listboxes are centered in the browser. How do I just have them left aligned

nap0leon

If you don't want auto margins, remove "margin: 0 auto" from #wrapper and the entire wrapper will be left aligned.

You can do whatever you want with the outer wrapper. In my example, the wrapper is centered on the page, but the two divs containing the listboxes are left aligned inside that wrapper.

sbornstein2

ASKER

thanks