Given a DIV with several inner-DIVs:
<div id="parent">
<div id="a"></div>
<div id="b"></div>
</div>
All DIVs are to have the same width, whereas it should be the width of the broadest DIV. The parent element has no explicit width.
How can I achieve that?
I thought width: 100% would do it, but it will stretch the parent element to window size.
Sketch:
################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#********* #
#*bbbbbbb* #
#********* #
################
should be
################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#**************#
#*bbbbbbb *#
#**************#
################
# represents the parent DIV, which does not fill the whole window.
First off, this type of CSS related question is perfect for the SO sister site DocType, which focuses on CSS and website design.
As for your problem, divs are block level elements and therefore stretch to all given space. If this is not happening, it means that there is something else overriding this. For a quick fix, add the following:
And it might fix your situation. If it does not, then you’ll have some conflicts in you CSS somewhere and by maybe giving some code or a more specific example, we might be able to help more. Again, though, as detailed in the SO FAQ, DocType is more suited for questions like this.