I am trying to align the two drop down boxes in the following image:
Javascript (for 1st drop down box)
//create drop-down box
var s = $('<select/>',{id:"category"});
$.each(data, function(key, value) {
$('<option/>', {value: value.category, text: value.category}).appendTo(s);
});
// add the category drop-down box.
s.appendTo('#categories');
CSS:
#category
{
text-align:center;
margin:0px auto;
display:block;
}
#categories
{
font-family: 'underdogregular';
padding: 0px;
margin: 0px auto;
text-align:center;
width: 280px;
}
HTML:
<body >
<div id='categories'>
<h3 id ='couponCategoriesTitle'>Coupon Categories</h3>
</div>
<div id = 'categorySubmitButtonDiv' >
<!--Add Category Search Button-->
<button class = "buttons" onclick="categorySubmit()">Search!</button>
</div>
</body>
I've only copied over the parts that I thought were relevant.
Would anyone know how I can get the two text boxes aligned in the middle?
Thank you for your help!