Imagine having a DIV with multiple inner-DIVs:
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
All the inner-DIVs need to have the same width, which should be equal to the widest DIV. The parent element itself does not have a defined width.
How can this be achieved?
I initially assumed that using width: 100% would solve it, but that ends up stretching the parent element to full window size.
Here is a visual representation:
################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#********* #
#*bbbbbbb* #
#********* #
################
Instead, we want it to look like this:
################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#**************#
#*bbbbbbb *#
#**************#
################
In this illustration, # symbolizes the parent DIV, which should not occupy the entire window width.