Skip to content

Instantly share code, notes, and snippets.

@RyoSugimoto
Created October 14, 2014 04:52
Show Gist options
  • Save RyoSugimoto/271f841939e96269c797 to your computer and use it in GitHub Desktop.
Save RyoSugimoto/271f841939e96269c797 to your computer and use it in GitHub Desktop.
ブラウザのウィンドウのサイズに応じて、幅が可変する、2カラムのリキッドレイアウトだが、サイドバーの幅は常に固定させる。
<div id="container">
<!-- サイドバー(幅を固定) -->
<div id="sidebar">
</div>
<!-- メインカラム(幅可変) -->
<div id="main">
<div id="main-content">
</div>
</div>
</div>
#container {
max-width: 960px;
}
#sidebar {
float: left;
position: relative;
width: 210px;
z-index: 1;
}
#main {
float: right;
margin-left: -250px;
position: relative;
width: 100%;
z-index: 0;
}
#main-content {
margin-left: 250px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment