My website needs a panel on the left side of the screen that contains square buttons, each button representing a different action. However, currently these buttons are stretching horizontally when they should be stretched vertically to match my UI design:
Click here to see my UI design.I've tried setting min-width: 100%; height: auto to make the buttons vertical, but it didn't work. I also attempted to use jQuery to equalize their dimensions, but still no luck.
Here is a snippet of my code:
#left_panel {
float: left;
width: 25%;
text-align: center;
}
.btn {
border-radius: 25px;
padding: 1%;
margin: 1%;
background-color: green;
}
.item {
border-radius: 10px;
float: right;
width: 71%;
padding: 1%;
margin: 1%;
background-color: grey;
}
checkbox {
display: inline-block;
width: auto;
}
.name {
display: inline-block;
background-color: white;
width: auto;
}
.del {
border-radius: 25px;
display: inline-block;
float: right;
background-color: red;
width: auto;
}<div id="left_panel">
<div class="btn" id="open">Open</div>
<div class="btn" id="add">Add</div>
<div class="btn" id="info">Info</div>
</div>
<div id="list">
<!--space for list-->
</div>