Align Sidebar (Which is Placed After Content) to the Left

Basically, I have a layout like this:

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

It's a bit different in the live website, but basically it's structured like that. The problem is, I want to align sidebar to the left-side, not to the right-side (currently it's on the right).

I'm placing the sidebar after the content, because the content needs to be loaded first, then the sidebar next.

I tried this 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; }

It works nicely in the demo (jsfiddle.net), but it doesn't work at all in the actual website.

Instead, what happened is the sidebar is aligned to the bottom left (after the content). I suppose this is because both the content and the sidebar has <table>s, but I'm not sure... I can't remove the <table> because those are needed for certain reasons.

Also, if anyone is wondering what is the use of <div id="table"><div id="tablerow">, it is used for a certain javascript on the website.

Can anybody help? Pardon my poor English..

Here is the live website if anyone needs to see: http://bleachindonesia.com/forum/ (the HTMLs are messy)

Solution

From

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

remove

display: table;

From

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

remove

display: table-row;

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

Give a width, such as

width: 900px;

Now your

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

is on the left side.