html - 将侧边栏(放置在内容之后)向左对齐

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>

live website有点不同，但基本上是这样的结构。问题是，我想将边栏对齐到左侧，而不是右侧(目前它在右侧)。

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

我试过这个 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;">

在左边。