2列のdivレイアウト：固定幅の右列、左流体

私の要件は単純です：正しい列が固定サイズである2つの列。残念ながら、stackoverflowでもGoogleでも、有効な解決策を見つけることができませんでした。ここで説明されている各ソリューションは、自分のコンテキストで実装すると失敗します。現在の解決策は次のとおりです。

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;
}

#content {
    margin-right: 265px;
}

#right {
    float: right;
    width: 225px;
    margin-left: -225px;
}

#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;
}

<div class="container">
    <div id="content">
        fooburg content
    </div>
    <div id="right">
        test right
    </div>
</div>

上記のコードで次のようになります。

|----------------------- -------|
| fooburg content  |            |
|-------------------------------|
|                  | test right | 
|----------------------- -------|

お知らせ下さい。どうもありがとう！

左側の列のフロートを取り外します。

HTMLコードでは、右側の列が左側の列の前に来る必要があります。

右側にフロート（および幅）があり、左側の列に幅がなくフロートがない場合、フレキシブルになります:)

また、overflow: hidden両方の内側のdivを囲むように、外側のdivにとある程度の高さ（自動にすることもできます）を適用します。

最後に、左の列にa width: autoとを追加します。overflow: hiddenこれにより、左の列が右の列から独立します（たとえば、ブラウザーウィンドウのサイズを変更し、これらのプロパティなしで右の列が左の列に触れた場合、左の列が実行されます）正しいものを囲み、このプロパティを使用すると、その空間に残ります）。

HTMLの例：

<div class="container">
    <div class="right">
        right content fixed width
    </div>
    <div class="left">
        left content flexible width
    </div>
</div>

CSS：

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​

ここの例：http : //jsfiddle.net/jackJoe/fxWg7/

http://www.alistapart.com/articles/negativemargins/を参照してください。これがまさに必要なものです（例4を参照）。

<div id="container">
    <div id="content">
        <h1>content</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget, arcu.</p>
        <p class="last">Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
    </div>
</div>

<div id="sidebar">
    <h1>sidebar</h1>
    <ul>
        <li>link one</li>
        <li>link two</li>
    </ul>
</div>

#container {
    width: 100%;
    background: #f1f2ea url(background.gif) repeat-y right;
    float: left;
    margin-right: -200px;
}
#content {
    background: #f1f2ea;
    margin-right: 200px;
}
#sidebar {
    width: 200px;
    float: right;

右の列を左の前に配置しないようにするのが最善で、単に負の右マージンを使用します。

また、@ media設定を含めることで「応答性」が高くなり、狭い画面では右の列が左の下に表示されます。

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div>
<div style="clear:both"></div>

<style type="text/css">
#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
}
#sidebar {
    width:300px;
    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}
</style>

これまで使用した最も単純で最も柔軟なソリューションtable display：

HTML、左のdivが最初に来て、右のdivが2番目に来ます...左から右に読み書きするので、divを右から左に配置しても意味がありません

<div class="container">
    <div class="left">
        left content flexible width
    </div>
    <div class="right">
        right content fixed width
    </div>
</div>

CSS：

.container {
  display: table;
  width: 100%;
}

.left {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}​​

.right {
  display: table-cell;
  width: (whatever you want: 100%, 150px, auto)
}

ケースの例：

// One div is 150px fixed width ; the other takes the rest of the width
.left {width: 150px} .right {width: 100%}

// One div is auto to its inner width ; the other takes the rest of the width
.left {width: 100%} .right {width: auto}

まだ述べられていないソリューションを提案したいと思います。CSS3を使用して、ユニットcalc()を混合%しpxます。calc()持っている優れたサポートを、今日、そしてそれは非常に複雑なレイアウトを迅速に構築することができます。

ここにJSFiddleがありますコードのリンクです。

HTML：

<div class="sidebar">
  sidebar fixed width
</div>
<div class="content">
  content flexible width
</div>

CSS：

.sidebar {
    width: 180px;
    float: right;
    background: green;
}

.content {
    width: calc(100% - 180px);
    background: orange;
}

そして、より複雑なレイアウトに適用されたこの概念を示す別のJSFiddleがあります。ここではSCSSを使用しました。変数によって柔軟で自己記述的なコードが可能になるためです。ただし、「ハードコードされた」値が問題にならない場合は、レイアウトを純粋なCSSで簡単に再作成できます。

これは、一般的なHTMLソースで注文されたソリューションです。

• ソース順の最初の列は流体です
• ソース順の2番目の列は固定です
  • この列はCSSを使用して左または右にフロートできます

右側の固定/ 2列目

#wrapper {
  margin-right: 200px;
}
#content {
  float: left;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

左側の固定/ 2列目

#wrapper {
  margin-left: 200px;
}
#content {
  float: right;
  width: 100%;
  background-color: powderblue;
}
#sidebar {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: palevioletred;
}
#cleared {
  clear: both;
}

<div id="wrapper">
  <div id="content">Column 1 (fluid)</div>
  <div id="sidebar">Column 2 (fixed)</div>
  <div id="cleared"></div>
</div>

代替ソリューションは、display：table-cellを使用することです。高さが同じ列になります。

ねえ、あなたができることは、両方のコンテナに固定幅を適用してから、clear：bothのような別のdivクラスを使用することです

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

左右のコンテナの下に明確なdivを配置します。

簡略化しました：ジャックジョーの回答を編集しました。高さオートは不要と思います。

CSS：

#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
}

#leftCol {
background: #e8f6fe;
width: auto;
}

#rightCol {
float:right;
width:30%;
background: #aafed6;
}

.box {
position:relative;
clear:both;
background:#F39;
 }
</style>

HTML：

<div id="container">

  <div id="rightCol"> 
   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
 </div>

 <div id="leftCol">

   <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

Lorem ipsum dolor sit amet、consectetuer adipiscing ellit。Phasellus varius eleifend。ロレム・イプサム・ドーラーはアメット座位、コンセクトトゥアアディピシングエリート。

</div>

</div>

<div class="box">
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>

  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
  <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>