Drop Downs Disappear & Can't Center Button - html

Question

I'm admitting right at the start: this is my first attempt at HTML/CSS coding. So please excuse my code's messiness.
I have two problems: 1. When I shrink my browser window small enough to see a scroll bar, my three drop down menus disappear. 2. I am trying to center my button (Find Resources), but can't figure it out. I've tried auto-ing my left and right margins, I tried text aligning, but it messed up the placement of my three boxes (which have a width of 200px).
Thanks for any help someone can offer!
HTML:
<div id="resource-wrapper">
<div id="content">
<p class="resource-p">Welcome to Our Resource Center.</p>
<p class="resource-p">How may we help you?</p>
</div>
<div id=buttons-div>
<div id=select>
<select class="dropdown" name="field_related_brands_nid">
<option value="All" selected="selected">Any</option>
<option value="2511">Sample</option>
</select>
<select class="dropdown-2" name="field_related_technology_nid">
<option value="All" selected="selected">Any</option>
<option value="444">Sample</option>
</select>
<select class="dropdown-3" name="field_resource_type_value_many_to_one">
<option value="All" selected="selected">Any</option>
<option value="multimedia">Sample</option>
</select>
</div>
<div id=buttons>
<img src="Images/Buttons1.jpg" class="resource-image">
<img src="Images/Buttons2.jpg" class="resource-image">
<img src="Images/buttons3.jpg" class="resource-image">
</div>
<button type="submit" class="resource-p1">Find Resources</button>
</div>
</div>
CSS:
#resource-wrapper {
width: 850px;
margin: 0 auto;}
#content {
background-color: #669bcf;
padding: 1px;
width: 100%;}
.resource-p {
text-align: center;
font-size: 30px;
font-family: sans-serif;
color: white;
line-height: 15px}
#buttons-div {
position: relative;
width: 850px;}
#select {
position: fixed;
margin-top: 214px;
width: 850px;}
.dropdown {
width: 160px;
margin-left: 78px;}
.dropdown-2 {
width: 125px;
margin-left: 115px;}
.dropdown-3 {
width: 95px;
margin-left: 148px;}
.resource-image {
margin: 50px 0 0 58px;}
.resource-p1 {
padding: 16px 18px 13px 18px;
margin: 20px;
text-align: center;
font-size: 21px;
font-family: sans-serif;
color: white;
font-weight: bold;
background-color: #669bcf;
border-style: solid;
border-width: 1px 1px 3px 1px;
border-color: #d7e4f4;
border-radius: 5px;}

Answer 1

Your Dropdowns shouldn't stack as nothing is responsive in your site. If they have a set width like width: 800px; They should be fine. However make sure to have all your id's surrounded with a quote:
<div id=buttons-div>
should be
<div id="buttons-div">
To Center your Resource Button:
.resource-p1 {
margin: 12px auto;
text-align: center;
font-size: 21px;
font-family: sans-serif;
color: white;
font-weight: bold;
background-color: #669bcf;
border-style: solid;
border-width: 1px 1px 3px 1px;
border-color: #d7e4f4;
border-radius: 5px;
display: block;
}

Answer 2

DEMO
1) Change #select's position from fixed to absolute
2) Wrap your button in a container and give that container text-align:center
HTML
<div id="find-resources-container">
<button type="submit" class="resource-p1">Find Resources</button>
</div>
CSS
#find-resources-container {
text-align:center
}