Выровнять боковую панель (которая размещается после содержимого) слева

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>с, но я не уверен... я не могу удалить <table> потому что они нужны по определенным причинам.

Кроме того, если кому-то интересно, какая польза от <div id="table"><div id="tablerow">, он используется для определенного JavaScript на сайте.

Кто-нибудь может помочь? Простите мой плохой английский..

Вот живой веб-сайт, если кто-то должен увидеть: http://bleachindonesia.com/forum/ (HTMLs грязные)

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;">

находится на левой стороне.