Come posizionare i div fianco a fianco

Ho un div wrapper principale che è impostato al 100% di larghezza. Al suo interno vorrei avere due div, uno a larghezza fissa e l'altro che riempie il resto dello spazio. Come faccio a galleggiare il secondo div per riempire il resto dello spazio. Grazie per qualsiasi aiuto.

Esistono molti modi per fare ciò che stai chiedendo:

1. Utilizzando la proprietà CSSfloat :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>

2. Uso della proprietà CSSdisplay - che può essere utilizzata per far sì che divs si comporti come un table:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>

Esistono più metodi, ma questi due sono i più popolari.

CSS3 ha introdotto box flessibili (alias flex box) che possono anche ottenere questo comportamento.

Basta definire la larghezza del primo div e quindi dare al secondo un flex-growvalore 1che gli permetterà di riempire la larghezza rimanente del genitore.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

jsFiddle demo

Si noti che le scatole flessibili non sono retrocompatibili con i vecchi browser, ma è un'ottima opzione per il targeting di browser moderni (vedere anche Caniuse e MDN ). Una grande guida completa su come usare le scatole flessibili è disponibile su Trucchi CSS .

Non so molto sulle strategie di progettazione HTML e CSS, ma se stai cercando qualcosa di semplice e che si adatti automaticamente allo schermo (come lo sono io) credo che la soluzione più semplice sia far sì che i div si comportino come parole in un paragrafo. Prova a specificaredisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Potrebbe essere necessario o meno specificare la larghezza dei DIV

È possibile utilizzare la griglia CSS per raggiungere questo obiettivo, questa è la versione a lungo termine a scopo illustrativo:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

O il metodo più tradizionale usando float e margin.

In questo esempio ho incluso un colore di sfondo per aiutare a mostrare dove sono le cose e anche cosa fare con i contenuti sotto l'area fluttuante.

Non mettere in linea i tuoi stili nella vita reale, estraili in un foglio di stile.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Dai al primo div un galleggiante a sinistra e fissato con, il secondo div 100% di larghezza un galleggiante a sinistra. Questo dovrebbe fare il trucco. Se si desidera posizionare gli oggetti al di sotto di esso è necessario un chiaro: sia sull'elemento che si desidera posizionare sotto

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Questo sarà compatibile con più browser. Senza il margine sinistro, si verificheranno problemi con il contenuto che scorre fino a sinistra se il contenuto è più lungo della barra laterale.

Se non stai tagando IE6, quindi sposta il secondo <div>e assegnagli un margine pari (o forse un po 'più grande) della <div>larghezza fissa del primo .

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Il margine rappresenta la possibilità che il "resto dello spazio" <div>possa contenere più contenuti della "larghezza fissa" <div>.

Non dare uno alla larghezza fissa uno sfondo; se hai bisogno di vederli visibilmente come "colonne" diverse, usa il trucco Colonne finte .