DOOManiac DOOManiac - 1 year ago 85
HTML Question

How to make groups of divs the same width using only CSS?

I've got a group of buttons (divs) which I would like to be the same length for all buttons within a logical group.

I could simply do a

for the CSS style of the button, however some button groups are short, while others are very long. This makes a uniform
either insufficient for long groups or wasteful/stupid looking for short ones. Additionally, multiple groups (short and long) can appear on the same screen.

Example of Button Layouts

(These divs are all styled with
display: inline-block
, so that's why they don't fill the width of the container)

I've thought of a few nasty solutions to this, but none are preferable:

  • Set a specific
    for each group

  • Use JavaScript to resize the buttons

I was wondering if there was a generic, pure CSS solution to the above problem instead of using either of these methods. Thanks for any help you can provide.

Edit: Here is the markup and CSS I've got so far. Pretty simple:


<div class="wrapper">
<div class="button">Lorem ipsum</div>
<div class="button">Lorem ipsum dolar</div>
<div class="button">Lorem</div>


div.button { display: inline-block; min-width: 50px; }

Answer Source

Wrap similar buttons in a container div with a desired width and set the inners divs to:

box-sizing: border-box;
width: 100%;

This will allow you to edit the widths of a logical grouping in one place.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download