В принципе, у меня есть такой макет:
<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-коды грязные)