Dwukolumnowy układ div z płynną lewą i stałą prawą kolumną

Oto rozwiązanie (i ma pewne dziwactwa, ale daj znać, jeśli je zauważysz i że są problemem):

<div>
    <div style="width:200px;float:left;display:inline-block;">
        Hello world
    </div>
    <div style="margin-left:200px;">
        Hello world
    </div>
</div>

CSS:

#sidebar {float: right; width: 200px; background: #eee;}
#content {overflow: hidden; background: #dad;}

HTML:

<div id="sidebar">I'm 200px wide</div>
<div id="content"> I take up the remaining space <br> and I don't wrap under the right column</div>

Powyższe powinno zadziałać, możesz umieścić ten kod w opakowaniu, jeśli chcesz dać mu szerokość i wyśrodkować go, overflow:hidden na kolumnie bez szerokości jest kluczem do uzyskania go zawierać, pionowo, jak w nie zawijać wokół bocznych kolumn (może być w lewo lub w prawo)

IE6 Może trzeba zoom:1 ustawić na # content div też jeśli potrzebujesz wsparcia

CSS Solutuion

#left{
    float:right;
    width:200px;
    height:500px;
    background:red;   
}

#right{
    margin-right: 200px;
    height:500px;
    background:blue;
}

Sprawdź działający przykład na http://jsfiddle.net/NP4vb/3/

JQuery Solution

var parentw = $('#parent').width();
var rightw = $('#right').width();
$('#left').width(parentw - rightw);

Sprawdź działający przykład http://jsfiddle.net/NP4vb/

Niedawno pokazano mi tę stronę dla płynnych layoutów za pomocą CSS. http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts (Spójrz na strony demo w linkach poniżej).

Autor dostarcza teraz przykład dla układów o stałej szerokości. Zobacz też; http://matthewjamestaylor.com/blog/how-to-convert-a-liquid-layout-to-fixed-width .

Daje to następujące przykład(y)), http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm (dla dwóch kolumn układ jak ty po myślę)

Http://matthewjamestaylor.com/blog/fixed-width-or-liquid-layout.htm (dla układu trzech kolumn).

Przepraszam za tak wiele linków do tej strony facetów, ale myślę, że jest to niesamowity zasób.

Myślę, że jest to prosta odpowiedź , to podzieli dzieci devs 50% każdy na podstawie szerokości rodzica.

 <div style="width: 100%">
        <div style="width: 50%; float: left; display: inline-block;">
            Hello world
        </div>
        <div style="width: 50%; display: inline-block;">
            Hello world
        </div>
    </div>

#wrapper {
  margin-right: 50%;
}
#content {
  float: left;
  width: 50%;
  background-color: #CCF;
}
#sidebar {
  float: right;
  width: 200px;
  margin-right: -200px;
  background-color: #FFA;
}
#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>