Set same width to multiple vertical elements, according to widest one

Question

I have a container containing multiple elements with a min-width and some padding to the right and left, the problem is in need them centered and in a column with each one in a separate row, the content of each one of them differs, causing the elements to have different width, like this

+--------- container ---------+
|child1 is too long|
|child2|
|child3 is long|
|child4|
+-----------------------------+

how can I make them all have the width of the largest element while maintaining a max-width in the same time, i.e. if the content gets too long, it breaks down to the next line while maintaining the width.

Attached below a screenshot, the above is the current situation, the one below is the desired result

can you make a [normal drawing](http://framebox.org/)? prepare it then take a screenshot and place it here — vsync, Dec 02 '18 at 10:53
Setting the same width on those elements with overflow hidden should do what you're asking, unless I'm missing something. — Joey Breithaupt, Dec 02 '18 at 11:34
Still the same answer: old good html table solves all your problems — smnbbrv, Dec 02 '18 at 11:45
@JoeyBreithaupt unfortunately I don't know the exact width of the content, as it would be localized, so some languages might be longer than others — user1712638, Dec 02 '18 at 11:48
@smnbbrv I can't use an html-table because the project restrictions — user1712638, Dec 02 '18 at 11:49
I see. Not the best solution but you could always set them to the width you want then `overflow-wrap: break-word;` to make sure nothing spills out or gets hidden; — Joey Breithaupt, Dec 02 '18 at 12:05
Does this answer your question? [Every item to have the same width as the widest element](https://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element) — leonheess, Aug 16 '21 at 18:57

vsync · Accepted Answer · 2018-12-02T13:36:57.610

1

You can wrap the items with a display:inline-block element,
and wrap that element in a text-align:center element so it would be centered:

.centered{ text-align:center; }

.wrapper{ 
  display: inline-block; 
  font: 24px Arial; 
  text-align: left;
}

.wrapper > div{
  border: 2px dashed pink;
  margin-bottom: 4px;
}

<div class='centered'>
  <div class='wrapper'>
    <div contenteditable>try typing here</div>
    <div contenteditable>aaaaa</div>
    <div contenteditable>aaaaa aaaaa</div>
    <div contenteditable>aa</div>
    <div contenteditable>aaaaaaaaa</div>
  </div>
</div>

The inner children are block level elements (<div>) which means they will take the whole width of their parent element, where the parent is an inline-block. This will result the parent is as wide as the widest child.

edited Dec 02 '18 at 13:36

answered Dec 02 '18 at 11:29

vsync

118,978
58
307
400

I've tried it with the wrapper having display:inline-block and each of the children having display: block, the smaller elements didn't expand to the width of the bigger ones – user1712638 Dec 02 '18 at 11:51
@user1712638 - My example works per your request. you probably have some style in your specific code which affects things, and with that I cannot help without having access to your code. – vsync Dec 02 '18 at 12:00
you are right, sorry about that, however it is not centered, with margin: 0 auto not working, as the container of it doesn't have a width, can you recommend something to fix that ! – user1712638 Dec 02 '18 at 12:10
@user1712638 - ok, you could have made it centered in the screenshot. I will make it centered – vsync Dec 02 '18 at 13:34

Set same width to multiple vertical elements, according to widest one

1 Answers1