define the height of two childs (div's) - I want each to be the max between thw two?

I have (father) main div contain two childs, (left and right divs).
How to define the height of the two childs (div's) that it will be the max between thw two (dynamic content)?

Thanks.

#main{
overflow: hidden;
white-space: nowrap;
position: relative;
background: yellow;
width:auto;
height:auto;
border:none;
margin: 0;
padding: 0;
}
#main_left{
display:inline-block;
position:relative;
width:178px;
height:auto;
margin: 0;
padding: 0;
background: red;
vertical-align:top;
}
#main_right{
display:inline-block;
position:relative;
width:100%;
height:auto;
margin: 0 0 0 -4px;
padding: 5px 0 0 30px;
background: brown;
border:none;
}

 

Could you clarify or state exactly what you're trying to do again?

On my screen (the way you have the code written) I see a yellow background div that takes 100% of the width with some slight padding and a small brown background div with some padding that pushes it down slightly and pushes it to the left

Are you trying to add content into the brown background div main_right and have it expand as content is added or what exactly are you trying to do?

 

Hi,
Thank you for your answer.
I added a test link to explain what I'm trying to do (I can't put links here so its on /test1.php - on itattoodesigns dot com )

1. the main_left div is the categories div - has red background
2. the main_right div is the content div of each page (dynamic content) - has brown background
3. the main div (contain 1,2 divs) has yellow background
my 2 goals:
1. the height of the main_left div will always be the max one between the two ( main_left div, main_right div) - in this case you can see that it stop when the content inside is finish. I want it to continue down to the height of the main_right div (I don't want to see any yellow background from the "main" div behind him).
2. the width of main_right div should be always on all the rest of the page width (main_left takes 180px and the rest is for the main_right ). I try 100% width, but it's comes out to be 180px extra to the rigth...

Thanks!!

 

Use Javascript , there is no crossbrowser method using pure CSS for what you need .

 

^^^ This. Call a JS function in the onLoad event handler to obtain the height of both DIV's. Whichever is bigger, set the style.height property of the other to that value. Only way to do it.

 

OK, thanks!