2 sütun div düzeni: sabit genişlikte sağ sütun, sol sıvı

Benim gereksinimim basit: doğru olanın sabit bir boyuta sahip olduğu 2 sütun . Ne yazık ki ne yığın akışında ne de Google'da çalışan bir çözüm bulamadım. Kendi bağlamımda uygularsam, orada açıklanan her çözüm başarısız olur. Mevcut çözüm:

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>

Yukarıdaki kod ile aşağıdaki olsun:

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

Tavsiye lütfen. Çok teşekkürler!

Sol sütundaki şamandırayı çıkarın.

HTML kodunda, sağ sütunun sol sütundan önce gelmesi gerekir.

Sağda kayan nokta (ve genişlik) varsa ve sol sütunda genişlik yoksa kayan nokta yoksa esnek olacaktır :)

Ayrıca overflow: hiddendış div'e bir ve bir miktar yükseklik uygulayın (otomatik olabilir), böylece her iki iç divı çevreler.

Son olarak, sol sütuna a ekleyin width: autove overflow: hiddenbu sol sütunu sağ sütundan bağımsız hale getirir (örneğin, tarayıcı penceresini yeniden boyutlandırdıysanız ve sağ sütun sol sütuna dokunduysanız, bu özellikler olmadan, sol sütun çalışır doğru özellikleri ile, bu özellikleri ile kendi alanında kalır).

Örnek 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;
}​​

Burada örnek: http://jsfiddle.net/jackJoe/fxWg7/

Bkz. Http://www.alistapart.com/articles/negativemargins/ , tam da ihtiyacınız olan şey budur ( örnek 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;

Sağ sütunu soldan önce yerleştirmekten kaçınmak için en iyisi, sadece negatif bir sağ kenar boşluğu kullanın.

Ve bir @media ayarı ekleyerek "duyarlı" olun, böylece sağ sütun dar ekranlarda solun altına düşer.

<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>

Kullanmak için şimdiye kadarki en basit ve en esnek çözümtable display :

HTML, sol div önce gelir, sağ div ikinci gelir ... soldan sağa okur ve yazarız, bu nedenle div'leri sağdan sola yerleştirmek hiç mantıklı olmaz

<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)
}

Vaka örnekleri:

// 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}

Henüz bahsedilmeyen bir çözüm önermek istiyorum: CSS3'leri calc()karıştırmak %ve pxbirimleri kullanmak için kullanın . günümüzde mükemmel bir desteğecalc() sahiptir ve oldukça karmaşık düzenlerin hızlı bir şekilde yapılmasına izin verir.

İşte aşağıdaki kod için bir JSFiddle bağlantısı.

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;
}

Ve işte bu kavramın daha karmaşık bir düzene uygulandığını gösteren başka bir JSFiddle . SCSS'yi burada değişkenleri esnek ve kendi kendini tanımlayan koda izin verdiğinden kullandım, ancak "sabit kodlanmış" değerlere sahip bir sorun yoksa düzen saf CSS'de kolayca yeniden oluşturulabilir.

Bu genel, HTML kaynak siparişli bir çözümdür:

• Kaynak düzenindeki ilk sütun sıvıdır
• Kaynak düzenindeki ikinci sütun düzeltildi
  • Bu sütun CSS kullanılarak sola veya sağa kaydırılabilir

Sağ taraftaki Sabit / İkinci Sütun

#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>

Soldaki Sabit / İkinci Sütun

#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>

Alternatif çözüm display kullanmaktır : table-cell ; eşit yükseklik sütunlarına neden olur.

Hey, yapabileceğiniz her iki kapsayıcıya sabit bir genişlik uygulamak ve daha sonra açık olan başka bir div sınıfı kullanmaktır:

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

sol ve sağ kabın altına açık bir div yerleştirin.

Basitleştirdim: Jackjoe'un cevabını düzenledim. Yükseklik otomatik vb gerekli sanmıyorum.

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, seçmenler adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consipetuer adipiscing elit.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>