float divs next to each other in absolutely aligned container - html

Question

I am trying to align a few buttons in a DIV popup I created. I want the buttons to be next to each other, but I cannot seem to make it work. I tried adding, float: left, but it does not seem to have an effect. Any suggestions? Thanks in advance.
<div id="pop_box">Hello there sir!
<div class="pop_buttons">Update Quantity</div>
<div class="pop_buttons">Check Out</div>
<div class="pop_buttons">Close Cart</div>
</div>
The CSS is as follows:
div.pop_box
{
z-index:3;
width:70%;
height:70%;
bottom:20%;
right:15%;
overflow:auto;
background-color:#434343;
position:absolute;
border-color:#808080;
border-style:solid;
border-collapse:collapse;
border-width:1px;
padding: 10px 10px 10px 10px;
}
div.pop_buttons
{
z-index: 4;
margin: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
bottom: 30%;
right: 30%;
font-family: 'Segoe UI', Arial;
font-size: 12px;
vertical-align:middle;
background-color:#808080;
}
UPDATE: Keep in mind that the buttons are contained in container "pop_box"...This makes a big difference, because pop_box has position:absolute.

Answer 1

When you wrap the buttons in another div and add float: left to pop_buttons, you get them nicely lined up
<div id="pop_box">Hello there sir!
<div>
<div class="pop_buttons">Update Quantity</div>
<div class="pop_buttons">Check Out</div>
<div class="pop_buttons">Close Cart</div>
</div>
</div>
CSS:
div.pop_buttons {
z-index: 4;
margin: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
bottom: 30%;
right: 30%;
font-family:'Segoe UI', Arial;
font-size: 12px;
vertical-align:middle;
background-color:#808080;
float: left;
}
JSFiddle

Answer 2

Your CSS selector is incorrect, it should be div#pop_box and not div.pop_box. You're also missing the float:left for div.pop_buttons in your question. Otherwise, it should all work as you expect.
Demo: http://jsbin.com/ulukid

Answer 3

You can try the following (see demo: http://jsfiddle.net/Z9vCb/):
HTML
<div id="pop_box">Hello there Sir!
<br/>
<div class="pop_buttons">Update Quantity</div>
<div class="pop_buttons">Check Out</div>
<div class="pop_buttons">Close Cart</div>
</div>
CSS
div.pop_box {
position:absolute;
z-index:3;
background-color:#434343;
border-color:#808080;
border-style:solid;
padding: 10px 10px 10px 10px;
}
div.pop_buttons {
float:left;
position:relative;
margin-right: 10px;
width: 100px;
height: 20px;
line-height:20px;
text-align:center;
font-family: 'Segoe UI', Arial;
font-size: 12px;
background-color:#808080;
}
Note: this is a "cleaned-up" CSS version, because your original one contains plenty of irrelevant properties, which is seemingly not applicable in this case.