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: 
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](http://jsfiddle.net/ehYsZ/)
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.