Disposizione div a 2 colonne: colonna destra con larghezza fissa, fluido sinistro

Il mio requisito è semplice: 2 colonne in cui quella giusta ha una dimensione fissa . Purtroppo non sono riuscito a trovare una soluzione funzionante, né su StackOverflow né su Google. Ogni soluzione qui descritta fallisce se implemento nel mio contesto. La soluzione attuale è:

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>

Ottengo quanto segue con il codice sopra:

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

Si prega di avvisare. Grazie molto!

Rimuovere il galleggiante sulla colonna di sinistra.

Nel codice HTML, la colonna di destra deve precedere quella di sinistra.

Se la destra ha un float (e una larghezza), e se la colonna di sinistra non ha una larghezza e nessun float, sarà flessibile :)

Applica anche una overflow: hiddene una certa altezza (può essere automatica) al div esterno, in modo che circonda entrambi i div interni.

Infine, nella colonna di sinistra, aggiungi un width: autoe overflow: hidden, questo rende la colonna di sinistra indipendente da quella di destra (ad esempio, se hai ridimensionato la finestra del browser e la colonna di destra toccava quella di sinistra, senza queste proprietà, la colonna di sinistra verrebbe eseguita intorno a quello giusto, con queste proprietà rimane nel suo spazio).

HTML di esempio:

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

Esempio qui: http://jsfiddle.net/jackJoe/fxWg7/

Vedi http://www.alistapart.com/articles/negativemargins/ , questo è esattamente ciò di cui hai bisogno ( esempio 4 lì).

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

Meglio evitare di posizionare la colonna di destra davanti a sinistra, basta usare un margine destro negativo.

Ed essere "reattivo" includendo un'impostazione @media in modo che la colonna destra cada sotto la sinistra su schermi stretti.

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

Finora la soluzione più semplice e flessibile da utilizzare table display:

HTML, div sinistra viene prima, div destra viene seconda ... leggiamo e scriviamo da sinistra a destra, quindi non ha senso posizionare i div da destra a sinistra

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

Esempi di casi:

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

Vorrei suggerire una soluzione non menzionata: utilizzare i CSS3 calc()per mescolare %e pxunità. calc()ha un supporto eccellente al giorno d'oggi e consente la costruzione rapida di layout piuttosto complessi.

Ecco un link JSFiddle per il codice qui sotto.

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

Ed ecco un altro JSFiddle che dimostra questo concetto applicato a un layout più complesso. Ho usato SCSS qui poiché le sue variabili consentono un codice flessibile e auto-descrittivo, ma il layout può essere facilmente ricreato in CSS puro se avere valori "hardcoded" non è un problema.

Questa è una soluzione generica, sorgente HTML ordinata in cui:

• La prima colonna nell'ordine di origine è fluida
• La seconda colonna nell'ordine di origine è stata corretta
  • Questa colonna può essere spostata a sinistra oa destra usando CSS

Colonna fissa / seconda a destra

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

Colonna fissa / seconda a sinistra

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

La soluzione alternativa è utilizzare display: table-cell ; che si traduce in colonne di uguale altezza.

Ehi, quello che puoi fare è applicare una larghezza fissa a entrambi i contenitori e quindi usare un'altra classe div dove chiaro: entrambi, come

div#left {

width: 600px;
float: left;
}

div#right {

width: 240px;
float: right;

}

div.clear {

clear:both;

}

posizionare un div chiaro sotto il contenitore sinistro e destro.

L'ho semplificato: ho modificato la risposta di jackjoe. L'altezza auto ecc. Non richiesta penso.

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, conservatore che adotta l'elite. Phasellus varius eleifend. Lorem ipsum dolor sit 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>