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

Question

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 min-length for the CSS style of the button, however some button groups are short, while others are very long. This makes a uniform min-length 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 min-length 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:

HTML:

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

CSS:

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

could you share your markup and the css you are using please — web-tiki, Dec 02 '14 at 17:09

score 14 · Accepted Answer · edited Aug 04 '16 at 08:07

14

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.

edited Aug 04 '16 at 08:07

ZeMoon

20,054
5
57
98

answered Dec 02 '14 at 17:12

Mike Kauffman

276
1
5

Manually specifying a width for each group was one of the things I wanted to avoid (see bullet #1). – DOOManiac Dec 02 '14 at 17:23
If I understand you correctly, you'll want to wrap them in a container the same way, without defining a min-width on that div. Then for the inner divs you will still set them to: `box-sizing: border-box; width:100%;` The container div will inherit its width from the largest width of it's child divs, and the rest will expand to that inherited width. – Mike Kauffman Dec 02 '14 at 17:35
After double checking my work, I discovered an error on my part. This solution does the trick! Thanks! – DOOManiac Dec 02 '14 at 17:42

score 1 · Answer 2 · answered Dec 02 '14 at 17:23

1

wrap them both in a container.

<div class="group">
    <div class="button">Hi</div>
    <div class="button">Wassup</div>
    <div class="button">Yo</div>
</div>

then apply css like this:

    display:inline-block;
    min-width: 100%;

and then set the div "group" that groups those divs in the width you wanted to

answered Dec 02 '14 at 17:23

marto

11
1

2

This just sets the buttons to 100% width of the container (which itself is 100% because it is just `display: block`). So short buttons end up wasting a lot of space and stretching across the page... – DOOManiac Dec 02 '14 at 17:27

Bhojendra Rauniyar · Answer 3 · 2014-12-02T17:32:25.557

0

Use min-width and max-width:

div{/*use the selector what you're using*/
  min-width: 150px;
  max-width: 350px;
  width: auto;
  display: inline-block;
}

If you want to get a uniform width, then you have to define a class name and style like this:

.width1{
  width: 200px;
}

.width2{
  width: 300px;
}

edited Dec 02 '14 at 17:32

answered Dec 02 '14 at 17:09

Bhojendra Rauniyar

83,432
35
168
231

This does nothing to align buttons that are less than the max-width... Ex: 200px & 250px. – DOOManiac Dec 02 '14 at 17:29
There's only this way you can do. This aligns the smaller divs not greater divs. – Bhojendra Rauniyar Dec 02 '14 at 17:30

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

3 Answers3