Css 带边距的图元：自动重叠浮动图元，解决方案？

我有一个div，在我想集中在我的内容区域的大多数页面上，我通过“

边距：5px auto；

”来实现这一点

在一个特定的页面上，我想在右边放置一个图像和标题（比如

），并将我的原始div放在剩余空间的中央。当我将我的新div设置为

float:right它只是与我的原始div重叠

解决这个问题的最佳方法是什么，使我的原始div可以在大多数页面上居中，但如果我在其旁边放置一个元素，则可以调整到侧面？（或者我可以使用表格或内联样式：(

我这里有一个问题

谢谢

编辑

为了澄清我想要的东西可以是任意宽度的
#right
，
#left
将位于剩余宽度的中心，文本将在
#left
下方清除，并在
#right
周围流动。
如果我找不到解决方案，我的退路将是用内联样式覆盖
#left
的边距，以便在任何给定页面上正确定位它。
浮动的问题是，它将该元素从正常的内容流中移除，它只是浮动在那里，与其他元素不协调。你可能不得不使用它作为内联元素或使用
clear:both
浮动的问题是它将该元素从正常的内容流中移除，它只是在那里浮动，与其他元素不协调。您可能只需要将其作为内联元素或使用
clear:both
使用jQuery更新的答案：



原始答案：

我能想到的最简单的解决方案是将浮动右div放在内容之外，然后给内容一个与浮动div宽度相等的右边距

更新小提琴：

HTML:

使用jQuery更新答案：



原始答案：

我能想到的最简单的解决方案是将浮动右div放在内容之外，然后给内容一个与浮动div宽度相等的右边距

更新小提琴：

HTML:

这个解决方案是有效的，但对我不起作用。
#content
是我的主要文章，我将把它几乎切成两半。我想要的东西是我可以拥有的
#right
的任意宽度，
#left
将在剩余宽度的中心，文本将在
#left
下面清除，并在
#right
周围流动>。问题是您的
#left
div以
#content
为中心，这是您想要的。我不认为没有JavaScript就可以做到这一点。这里有一个使用jQuery的小把戏：我想避免使用JavaScript，纯粹是出于情感原因，但我会考虑一下。它可以实现我想要的。这个解决方案是有效的，但对我来说不起作用。
#内容
是我的主要文章，我会把它几乎切成两半。我想要一些我可以拥有的东西，右

是任意宽度，

#左

将集中在剩余的宽度，文本将在

#左

下面清除，并在

#右

周围流动。问题是你的

#左

div以

#内容
为中心。我认为没有JavaScript是无法做到这一点的。这里有一个使用jQuery的小把戏：我想避免使用JavaScript，纯粹是出于情感原因，但我会考虑一下。它做了我想做的事情。
$(document).ready(function(){
    var margin = (($('#content').width() - $('#right').width()) - $('#left').width() ) / 2;
    $('#left').css('margin-left', margin + 'px');
});

<div id="right"></div> 
<div id="content">
<div id="left"></div>
<p>Lorem ipsum etc. etc. hkf uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk uhuhek jfhksd jhgklh wgeluih e d shd ed k uhue f vgkdgku  e fudu ghf ugefkiu gek fwioeugf i ghdsi gusdui djhfk</p>
</div>

#content {
    padding: 5px; 
    margin-right:200px;
}

#right {
    background: rgba(0,0,255,0.8);
    float: right;
    width: 200px;
    height: 200px;
    margin: 5px;
}

#left {
    background: red;
    margin: 5px auto;
    width: 200px;
    height: 120px;
}