In working on a new layout, I've run into a problem that I can't seem to find an answer to. The layout has a white bar that runs the width of the site and the height is dynamic, depending on the content of it. However, the layout is centered with a fixed with and to the right of the layout, there is a floating box that is supposed to hang outside of the white bar. After a quick writeup, the code works fine in Firefox, but when I view it in IE7 or Opera, the white bar expands to enclose the floating div. I've looked for ways to keep them from doing that, but have been unsuccessful so far.

Here is the code.

XHTML
-------
<div id="titleback">
<div id="title">
<div id="titlelist">
</div>
</div>
</div>

CSS (the fixed heights on the boxes are arbitrary. they are only for testing.)
-------
#titleback {
width: 100%;
margin: 0;
background: #fff;
}


#title {
width: 960px;
height: 100px;
margin: 0 auto;
text-align: left;
}

#titlelist {
width: 286px;
height: 200px;
margin: 0;
float: right;
background: #f1f2f3;
text-align: left;
}

http://altr-ego.net/layout/ here is a working example of the site's skeleton so you can compare.

Thank you.