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


Tags: html,css,css3,layout,user-experience

Problem :

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; }


Solution :

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.


    CSS Howto..

    How To select a specific Div from its Class with JS

    how to change the opacity of the text along with the colorscale of the image in css?

    How to select all fields from a single box?

    CSS Overflow, the scroll bar appears at the bottom, how can I get a scroll bar at the top?

    How to override external css marked as !important? [closed]

    How to let Materialize use classes for dropdowns and not ID's?

    CSS: How do I assign one class to multiple elements?

    How to turn off link effect on iPhone/iPod/iPad (CSS)?

    How to reproduce the following effect in CSS, stuck at padding(I think) Bootstrap 3.0

    how to apply css property to my first div class only

    How to reflow DIV boxes in CSS to stick to bottom right?

    How to use nify javascript to make round corner box? Im using but not working

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to modify wordpress plugin css [closed]

    How can I use CSS to set as my
  • background if I'm using the Zend framework?
  • How to change css dynamic by javascript

    How to maintain page backgroud image zoom fixed? CSS

    How to hide overflow on slideshow without hiding arrows?

    How to override a property set in an id (CSS)

    How to fit label “css width”

    R shiny: How to change the width of a progress-bar

    How do I get content to overflow into another div if there is room, using css?

    Show/Hide inline Form

    With three divs, how to make one float to the right?

    How to CSS style a table such that its width is within [min, max] percent of page width and as wide as necessary?

    How to change Image inside of CSS of a usercontrol

    How to make fadeIn() and hide() work only for tablet and desktop versions?

    How to fix this css float problem?

    How can I apply same style from element that changes in HTML to one that doesn't change in HTML?

    How to create marquee infinite loop of logos slider with css only