将侧边栏（放置在内容之后）向左对齐

Question

基本上，我有这样的布局：

<div id="wrapper">
    <div id="header"> HEADER </div>
    <div id="body">
        <div id="table"><div id="tablerow">
        <div id="content"> MAIN CONTENT </div>   
        <div id="sidebar"> SIDEBAR </div>
        </div></div>
    </div>
</div>

在实时网站中有点不同，但基本上它的结构是这样的。问题是，我想将侧边栏对齐到左侧，而不是右侧（目前它在右侧）。

我将侧边栏放在内容之后，因为需要先加载内容，然后再加载侧边栏。

我试过这个 CSS：

#body { overflow:auto; }
#table {display:table;}
#tablerow {display:table-row;}
#sidebar { float:left; width:150px; display:table-cell;margin-right:5px; }
#content { float:right; display:table-cell; }

它在演示（jsfiddle.net）中运行良好，但在实际网站中根本不运行。

相反，侧边栏与左下角对齐（在内容之后）。我想这是因为内容和侧边栏都有<table>s，但我不确定...我无法删除<table>，因为某些原因需要这些。

另外，如果有人想知道<div id="table"><div id="tablerow"> 的用途，它用于网站上的某个javascript。

有人可以帮忙吗？原谅我英语不好..

如果有人需要查看，这里是实时网站：http://bleachindonesia.com/forum/（HTML 很乱）

Answer 1

来自

<div style="width: 100%; display: table;">

删除

display: table;

来自

<div style="display: table-row;">

删除

display: table-row;

到

<div id="content" style="padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; float: right; display: table-cell;">

给一个宽度，比如

width: 900px;

现在你的

<div class="lside" id="sidemenu" style="width: 20%; margin-right: 5px; display: table-cell;">

在左边。