css - css 2列レイアウト

Question

基本的な 2 列の CSS レイアウトがあります。CSS は次のようになります。

#sidebar {
    width:100px;
}
#main {
    margin-left:100px;
}

そしていくつかのサンプルhtml

<div id="content">
  <div id="sidebar">some sidebar content</div>
  <div id="main">some main content</div>
</div>

これは機能しますが、サイドバーの幅がメインの margin-left 値と一致する必要があるということは、反復的でエラーが発生しやすいようです。これを行うより良い方法はありますか？

Answer 1

パディング左と-ve マージンを指定してsidebar内部にネストできます。mainmainsidebar

#content{
    width: 100%;
}
#sidebar, #main{
    float: left;
    display: block;
}
#sidebar{
    width: 100px;
    background-color: orange;
    margin-left: -100px;
}
#main{
    padding-left: 100px;
    background-color: green;
    width: 100%;
}

<div id="content">
    <div id="main">
        <div id="sidebar">some sidebar content</div>some main content
    </div>
</div>

これが動作デモです。