outer div to grow according to inner div

[scim1971]

Hi,

I'm making the transition from table based layout to div based layout but I'm stuck.

I have a "footer" section on my site that is a grey bar. Within that grey bar there are two columns, one the left a copyright message and on the right a footer menu/navigation.

I'm trying to do this with <div>'s and so far I have an outer div (the footer bar) and two inner div's with the left and right side content like this:

<div id="footerbar">

<div id="copyright">Copyright &copy; All Rights Reserved</div>

<div id="menuFooter">
<ul><li>my menu goes here</li></ul></div>

</div>

and this is the CSS:
#footerbar {
height: auto;
background:#DADADA;
width:100%;
padding-top: 20px;
padding-bottom: 20px;
}
#copyright {
display:block;
position: relative;
height:auto;
float:left;
margin-left: 16px;
}
#menuFooter {
display:block;
overflow:auto;
height:auto;
float:right;
text-align: right;
margin-right:16px;
}

What I want to happen is if the the content in one of the "inner" div's grows over a few lines then the outer (footerbar) div should grow also (in height). This works when viewed in IE7 but not in Safari v4 (for PC) and Firefox - with the latter two browsers the "footerbar" outer div stops and if the inner content grows to big it just overlaps the outer div and is not contained.

I've Googled this to death and tried lots of different solutions but I can't find anything that works on IE7, Safari and Firefox.

At this rate I may need to go back to my trusty table based layout.

Can anyone help?

[scim1971]

Just when I thought I'd tried everything I found the solution. I added a third <div> inside my outer div which cleared the "floats" like this:
<div style="clear:both"></div>
and it now works

[Marshall]

Your other option is simply use <br style="clear: both;" /> which works just as well and makes for fewer empty divisions.

Marshall