Octopressでサイドバーを残そうとしてハマった所

Octopressの初期設定だとブログの幅を狭くしていくとサイドバーが下に回る様になってるんですが、なんとなくそれを止めようと思って試した時にちょっとハマった所について。

CSSについての勘違い
1px borderの罠

CSSについての勘違い

Octopressのページ構成を物凄く簡略化するとこんな感じ。

<html>
  <body>
    <div id="content">
      <div class="entry-content">
        Article
      </div>
      <aside class="sidebar">
        Sidebar
      </aside>
    </div>
  </body>
</html>

これで、各要素がこんな感じ。

body{
    -webkit-text-size-adjust:auto;
    max-width:400px;
    min-width:300px;
    position:relative;
    margin:0 auto;
}
#content{
    overflow:visible;
    margin-right:150px;
    position:relative;
}
#content>div{
    width:100%;
    float:left;
}
aside.sidebar{
    width:150px;
    padding:0;
    clear:none;
    float:left;
    margin:0 -100% 0 0;
}

実際、最初のclassicテーマだと、レスポンシブな感じになってますがその辺りは省いてます。

これで、上のままだとこんな感じ:

サイドバーがそのまま留まる

ブラウザを狭くして行ってもらうとわかると思いますが、最小限まで行くと、サイドバーの方がそのままはみ出していきます。

で、この時に、Sidebarの幅を150pxのまま、 Articleの方を100pxとかSidebarより狭くしたい、と思ってそうしてたんですが、上のbodyの幅を短くしてmarginはそのまま残してもこんな感じで狭くしていくとサイドバーが下に行ってしまいます。

サイドバーが下に行ってしまう

しっかり理解してなかった点は、margin-left:-100%みたいな感じで右にずらしていても、元のスペースに充分に余白がないと駄目、ということです。

上だとArticle部分はmarginを引いて100pxまでは必ず残るんですが (全体が250pxになると100pxになる)、全体幅が300px切るとSidebarは左の元の部分に充分な幅が無くなって下に落ちてしまってます。

取り敢えず、単にCSSをよく知らなかっただけ、です。。。 floatで横にmarginを使って持ってきたい時は簡単には幅の広い方をメインにしてやらないと駄目、ということ(で正しいはず)。

1px borderの罠

この辺を切り替えるのは面倒なので、取り敢えず両方等幅にして過ごそうと思ったんですが、どうもギリギリまで狭めるとやはり下に行ってしまうことが。

Octopressで基本的に幅等を決めてるのはsass/base/_layout.scss の中なので、この中で計算してmarginやら色々変えて正しく出来てるはずなのに、どうしても出来ないという事態に。

そんな中、ふとsass/ase/_theme.scssを見てみると一番下にこんな記述。。。

sass/ase/_theme.scss

body {
  > div {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}