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 get a zoomed out background image?

    How to load content in a “virtual window” like “LightBox”

    How can I make sure redundant

    tags do not break styling?

    How to hide submenu until it is hovered over by mouse

    How do I remove the gap between the header and image slider

    Design Issue: How to design a webpage that should show 11 elements with a description for each elements? [closed]

    How to serve different css files to different ajax pages?

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    CSS: how to position element in lower right?

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    How to center a CSS Hexagon

    How do i wrap a parent div to the width of a child div (dialog)?

    how to make a text ele to the right of a left floated ele automatically occupy the rest width?

    How to fix internet explorer 9 overflow with form elements displayed in a list and “display:table”-based layout

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]

    How to make a vertical CSS menu with arrows on the right of each entry?

    How to fix Conflicting responsive menu Css and Colorbox css?

    Asp.Net how to apply a css style to all the control of it's kind

    I have a standard table with text inside. How do I vertical align this?

    How to remove the empty space between divs in CSS?

    How to set css for first div, if there's no second div

    How to display shopping cart at the right of page

    how to change the cssclass of a div after press a button in asp.net c#?

    How to make a pure css based dropdown menu?

    How to reduce the wiDth of dropdown-menu?

    How to fix an image to the bottom right with resizing window?

    How to achieve this gradient using valid HTML & CSS only

    How can I force browsers to print background images in CSS?

    how do i change a div background when you hover over a button in another div?

    How do I use CSS in Django?