Make buttons the same width without specifying the exact size - html

Question

I have five buttons. I want them to take up the available width of their parent div, each being equally sized:
<div style="width: 100%; background-color: red;">
<button type="button" style="width: 20%;">A</button>
<button type="button" style="width: 20%;">B</button>
<button type="button" style="width: 20%;">C</button>
<button type="button" style="width: 20%;">D</button>
<button type="button" style="width: 20%;">E</button>
</div>
Is there a way I can do this without having the manually figure out that they each require 20% width? I want to remove a button at runtime, and that means I have to go and update each remaining button again to width=25%.
I am just checking if there's a more automated way of doing it.

Answer 1

The simplest way, and the most robust way, is to use a table:
<style>
.buttons {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: red;
}
.buttons button {
width: 100%;
}
</style>
<table class=buttons>
<tr>
<td><button type="button">A</button>
<td><button type="button">B</button>
<td><button type="button">C</button>
<td><button type="button">D</button>
<td><button type="button">E</button>
</table>
(This won’t improve your reputation among colleagues these days if they see your code, though it actually solves the problem probably better than any alternative. So you might consider doing the next best thing: use div markup and display: table etc. Fails on old browsers that don’t support such CSS features.)

Answer 2

This is my favorite method (Flexbox)! -
<div style="width: 100%; background-color: red;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
<button type="button">D</button>
<button type="button">E</button>
</div>
div {
display: flex;
justify-content: space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you like */
}
No matter how many buttons you have, it will resize the button width automatically and fill the div.
Working pen: http://codepen.io/anon/pen/YpPdLZ

Answer 3

This is how I'd tackle a situation like this, taking a queue from front-end grid systems. Use classes! When you remove the button, change the class. Here's a fiddle.
Your HTML markup could change to this:
<div>
<button type="button" class="fiveup">A</button>
<button type="button" class="fiveup">B</button>
<button type="button" class="fiveup">C</button>
<button type="button" class="fiveup">D</button>
<button type="button" class="fiveup" id="remove_this">E</button>
</div>
<button id="remove_one">Remove One</button>​
CSS like so:
.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}
and jQuery like so, though you'll probably want to use this script as part of whatever process removes the button:
$('#remove_one').click(function(){
$('#remove_this').remove();
$('button').each(function(){
$(this).removeClass('fiveup').addClass('fourup');
});
});​

Answer 4

With bootstrap it is as simple as
<div class="btn-group-vertical">
</div>

Answer 5

If we take that their parents are equally sized, you have two solutions to your problem:
CSS:
button { /* You may want to limit the selector */
width: 100%; /* Or any other percent */
}
JavaScript (jQuery):
$("button").width("100%");
Please note, however, that to be sure you also get the exact value, you may want to stick to pixels. If you are willing to use JavaScript, you can also use computed width.
Edit
If you want to use JavaScript without jQuery, try:
var buttons = document.getElementsByTagName("button"),
i = 0;
for (; i < buttons.length; i++) {
buttons[i].width = "100%"; //Or any other value
}
Note, however, that .getElementsByTagName() will have to be replaced if you want a more complex query.

Answer 6

I think, with jQuery, you could do something more dynamic.
The process for the algorithm would be:
get the width of the div, put into a variable.
divide the width by the number of buttons and put that answer into a variable.
run a function that creates a button at that width by however many times required.