http://img263.imageshack.us/img263/6135/csso.png
Everything's explained in the above image link above.
Basically, I need a sidebar div whose width expands according to the content inside of it and a mainContent that expands to the rest of the width of the window.
This seems to do it. @stefanw has a point, though. The side bar will expand to the width of its text, and that means the text will not wrap. I think that is probably not what you want. Or maybe it is, if what you are putting in there is not vary wide, but isn't fixed either?
<html>
<head>
<style type="text/css">
#overallWrapper div {
background: #CCC;
border: 1px solid black;
padding: 15px;
height: 100%;
}
#sideBar {
float: left;
}
</style>
</head>
<body>
<div id="overallWrapper">
<div id="sideBar">
I need this to expand to the width of this text...
</div>
<div id="content">
This should take the rest of the room, whatever's left...
</div>
</div>
</body>
</html>
You could remove the overallWrapper, if you want.
If you're at all concerned about the width of the side bar on the left, you can apply the max-width css property to the left div, in case you aren't line breaking your inline content.
Also, make sure your doctype is strict if you're supporting ie7 with max-width.