我正在尝试编写用户样式来重新格式化另一个网站（没有机会更改html）。
目前该网站的左侧主要内容为RHS的全高边栏。
我已经使用CSS来删除大部分侧边栏内容，现在可以扩展主要内容以填充侧边栏下方区域的宽度。
如果我控制了HTML源代码，我会先将侧边栏放在样式中使用'float：right'，但我无法控制源代码，侧边栏div位于主要内容之后。
传统上这不能在CSS中完成，但现在可以使用CSS3完成吗？如果是这样怎么样？
我实际尝试设置的页面是TripAdvisor论坛页面，例如this one但是它们过于复杂，不能尝试用作示例，所以我创建了这个非常简单的网页来玩：
<!DOCTYPE html>
<html>
<head>
<style>
#mainbody {
border: 2px solid blue;
width: 600px;
}
#sidebar {
border: 2px solid green;
position: inherit;
float: right;
width: 250px;
}
#content {
position: inherit;
width: 550px;
}
</style>
</head>
<body>
<div id=mainbody>
<div id=content>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa.</p>
</div>
<div id=sidebar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper
porta. Mauris massa. </p>
</div>
</div>
</body>
</html>}侧边栏高于内容我得到所需的格式