I'm currently working on aligning a set of buttons within a DIV popup that I've created. My goal is to have the buttons positioned next to each other, but I'm having trouble achieving this. I've attempted using 'float: left', however, it doesn't seem to be working. Any advice or suggestions would be greatly appreciated. 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>
Here is the CSS code:
.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: It's important to note that the buttons are contained within the "pop_box" container...This distinction matters because "pop_box" has a position of absolute.