2-Spalten-Div-Layout: rechte Spalte mit fester Breite, linke Flüssigkeit

Meine Anforderung ist einfach: 2 Spalten, wobei die richtige eine feste Größe hat . Leider konnte ich weder bei Stackoverflow noch bei Google eine funktionierende Lösung finden. Jede dort beschriebene Lösung schlägt fehl, wenn ich sie in meinem eigenen Kontext implementiere. Die aktuelle Lösung lautet:

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>

Mit dem obigen Code erhalte ich Folgendes:

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

Bitte beraten. Danke vielmals!

Entfernen Sie den Schwimmer an der linken Spalte.

Beim HTML-Code muss die rechte Spalte vor der linken stehen.

Wenn die rechte Spalte einen Float (und eine Breite) hat und die linke Spalte keine Breite und keinen Float hat, ist sie flexibel :)

Wenden Sie auch eine overflow: hidden und eine gewisse Höhe (kann automatisch sein) auf das äußere Teil an, so dass es beide inneren Teile umgibt.

Fügen Sie schließlich in der linken Spalte ein width: autound hinzuoverflow: hidden , wodurch die linke Spalte von der rechten unabhängig wird (wenn Sie beispielsweise die Größe des Browserfensters geändert haben und die rechte Spalte die linke berührt hat, ohne diese Eigenschaften, wird die linke Spalte ausgeführt um die rechte herum, mit diesen Eigenschaften bleibt es in seinem Raum).

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

Beispiel hier: http://jsfiddle.net/jackJoe/fxWg7/

Siehe http://www.alistapart.com/articles/negativemargins/ , genau das benötigen Sie ( Beispiel 4) dort).

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

Um zu vermeiden, dass die rechte Spalte vor der linken steht, verwenden Sie einfach einen negativen rechten Rand.

Und seien Sie "reaktionsschnell", indem Sie eine @ media-Einstellung einfügen, sodass die rechte Spalte auf schmalen Bildschirmen unter die linke fällt.

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

Einfachste und flexibelste Lösung so weit , es zu benutzen table display:

HTML, linkes Div steht an erster Stelle, rechtes Div steht an zweiter Stelle ... wir lesen und schreiben von links nach rechts, daher macht es keinen Sinn, die Divs von rechts nach links zu platzieren

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

Fallbeispiele:

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

Ich möchte eine noch nicht erwähnte Lösung vorschlagen: Verwenden Sie CSS3s calc()zum Mischen %und pxEinheiten. calc()hat ausgezeichnete Unterstützung heutzutage und ermöglicht die schnelle Erstellung recht komplexer Layouts.

Hier ist ein JSFiddle- Link für den folgenden Code.

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

Und hier ist eine weitere JSFiddle , die dieses Konzept demonstriert und auf ein komplexeres Layout angewendet wird. Ich habe hier SCSS verwendet, da seine Variablen flexiblen und selbstbeschreibenden Code ermöglichen, aber das Layout kann einfach in reinem CSS neu erstellt werden, wenn "fest codierte" Werte kein Problem darstellen.

Dies ist eine generische, nach HTML-Quellen geordnete Lösung, bei der:

• Die erste Spalte in der Quellreihenfolge ist flüssig
• Die zweite Spalte in der Quellreihenfolge ist festgelegt
  • Diese Spalte kann mit CSS nach links oder rechts verschoben werden

Feste / zweite Spalte rechts

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

Feste / zweite Spalte links

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

Eine alternative Lösung ist die Verwendung von display: table-cell ; was zu Spalten gleicher Höhe führt.

Hey, was Sie tun können, ist eine feste Breite auf beide Container anzuwenden und dann eine andere div-Klasse zu verwenden, wo klar: beide, wie

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

Platziere das klare Div unter dem linken und rechten Behälter.

Ich habe es vereinfacht: Ich habe Jackjoes Antwort bearbeitet. Die Höhe Auto usw. nicht erforderlich, denke ich.

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 sitzen amet, Consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sitzen amet, consectetuer 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>