How can I stretch a DIV to 100%, without streching its auto-width parent element?

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:

#parent {
    position: relative;
}

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.

A div is generally stretched based on its contents. To get the two inner divs to have the same width, specify width as 50% and float one on the left of the other. Moreover, use a clear:both on the outer div.

please take a look at this great resource as well :

http://www.maxdesign.com.au/articles/css-layouts/