@Boushley's answer was the closest, however there is one problem not addressed that has been pointed out. The right div takes the entire width of the browser; the content takes the expected width. To see this problem better:
<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
height: 100%;
}
#left {
opacity: 0;
height: inherit;
float: left;
width: 180px;
background: green;
}
#right {
height: inherit;
background: orange;
}
table {
width: 100%;
background: red;
}
</style>
</head>
<body>
<div id="left">
<p>Left</p>
</div>
<div id="right">
<table><tr><td>Hello, World!</td></tr></table>
</div>
</body>
</html>
The content is in the correct place (in Firefox), however, the width incorrect. When child elements start inheriting width (e.g. the table with width: 100%) they are given a width equal to that of the browser causing them to overflow off the right of the page and create a horizontal scrollbar (in Firefox) or not float and be pushed down (in chrome).
You can fix this easily by adding overflow: hidden to the right column. This gives you the correct width for both the content and the div. Furthermore, the table will receive the correct width and fill the remaining width available.
I tried some of the other solutions above, they didn't work fully with certain edge cases and were just too convoluted to warrant fixing them. This works and it's simple.
If there are any problems or concerns, feel free to raise them.