CSS due div uno accanto all'altro

Voglio mettere due <div>s uno accanto all'altro. La destra <div>è di circa 200 px; e la sinistra <div>deve riempire il resto della larghezza dello schermo? Come posso fare questo?

Puoi usare la flexbox per disporre i tuoi oggetti:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Questo è fondamentalmente solo raschiare la superficie del flexbox. Flexbox può fare cose incredibili.

Per il supporto del browser precedente, è possibile utilizzare il float CSS e le proprietà di larghezza per risolverlo.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Non so se questo è ancora un problema attuale o no, ma ho appena riscontrato lo stesso problema e ho usato il display: inline-block;tag CSS . Avvolgendoli in un div in modo che possano essere posizionati in modo appropriato.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Si noti che l'uso dell'attributo di stile inline è stato usato solo per la succinta di questo esempio, ovviamente questi sono stati spostati in un file CSS esterno.

Sfortunatamente, questa non è una cosa banale da risolvere per il caso generale. La cosa più semplice sarebbe aggiungere una proprietà in stile css "float: right;" al tuo div 200px, tuttavia, ciò causerebbe anche che il tuo "main" -div fosse effettivamente a tutta larghezza e qualsiasi testo in esso fluttuasse attorno al bordo del 200px-div, che spesso sembra strano, a seconda del contenuto (praticamente in tutti i casi tranne se si tratta di un'immagine mobile).

EDIT: Come suggerito da Dom, il problema del wrapping potrebbe ovviamente essere risolto con un margine. Sciocco me

Il metodo suggerito da @roe e @MohitNanda funziona, ma se il div giusto è impostato come float:right;, allora deve venire prima nel sorgente HTML. Ciò interrompe l'ordine di lettura da sinistra a destra, il che potrebbe creare confusione se la pagina viene visualizzata con gli stili disattivati. In tal caso, potrebbe essere meglio utilizzare un div wrapper e un posizionamento assoluto:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

dimostrato:

Modifica: Hmm, interessante. La finestra di anteprima mostra i div formattati correttamente, ma l'elemento del post renderizzato no. Scusate allora, dovrete provarlo da soli.

Ho riscontrato questo problema oggi. Sulla base delle soluzioni sopra, ha funzionato per me:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Basta fare in modo che il div parent si estenda per l'intera larghezza e fluttui i div contenuti all'interno.

AGGIORNARE

Se è necessario posizionare elementi in una riga, è possibile utilizzare Flex Layout . Ecco un altro tutorial Flex . È un ottimo strumento CSS e anche se non è compatibile al 100%, ogni giorno il suo supporto sta migliorando. Funziona così come:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

E quello che ottieni qui è un contenitore con una dimensione totale di 4 unità, che condividono lo spazio con i suoi figli in una relazione di 1/4 e 3/4.

Ho fatto un esempio in CodePen che risolve il tuo problema. Spero possa essere d'aiuto.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

MOLTO VECCHIO

Forse questa è solo una sciocchezza, ma hai provato con un tavolo? Non utilizza direttamente CSS per posizionare i div, ma funziona benissimo.

Puoi creare una tabella 1x2 e metterti divsdentro, quindi formattare la tabella con CSS per inserirli come desideri:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Nota

Se vuoi evitare di usare la tabella, come detto prima, puoi usare float: left;e float: right;e nel seguente elemento, non dimenticare di aggiungere un clear: left;, clear: right;o clear: both;per avere la posizione pulita.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Questo funzionerà OK finché impostato clear: bothper l'elemento che separa questo blocco di due colonne.

Ho riscontrato lo stesso problema e la versione di Mohits funziona. Se vuoi mantenere il tuo ordine da sinistra a destra nell'html, prova questo. Nel mio caso, il div sinistro sta regolando la dimensione, il div destro rimane alla larghezza di 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

Il trucco è usare un'imbottitura giusta sulla scatola principale ma usare di nuovo quello spazio posizionando di nuovo la scatola giusta con margine destro.

Uso una miscela di float e overflow-x: hidden. Codice minimo, funziona sempre.

https://jsfiddle.net/9934sc4d/4/ - PLUS non è necessario cancellare il galleggiante!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Come tutti hanno sottolineato, lo farai impostando a float:right;sul contenuto RHS e un margine negativo su LHS.

Tuttavia .. se non usi float: left;a sull'LHS (come fa Mohit) otterrai un effetto graduale perché il div LHS consumerà ancora lo spazio marginato nel layout.

Tuttavia .. il float LHS ridurrà il contenuto, quindi dovrai inserire un childnode a larghezza definita se questo non è accettabile, a quel punto potresti aver definito la larghezza sul genitore.

Tuttavia .. come sottolinea David, è possibile modificare l'ordine di lettura del markup per evitare i requisiti del float LHS, ma ciò presenta problemi di leggibilità e probabilmente di accessibilità.

Tuttavia .. questo problema può essere risolto con float con qualche markup aggiuntivo

(avvertenza: non approvo il div .clearing in quell'esempio, vedi qui per i dettagli)

Tutto considerato, penso che la maggior parte di noi vorrebbe che ci fosse una larghezza non avida: rimanere in CSS3 ...

Questa non sarà la risposta per tutti, dal momento che non è supportata in IE7-, ma potresti usarla e quindi utilizzare una risposta alternativa per IE7-. È display: tabella, display: tabella-riga e display: tabella-cella. Nota che questo non sta usando le tabelle per il layout, ma lo styling dei div in modo che le cose si allineino bene senza tutta la seccatura dall'alto. La mia è un'app html5, quindi funziona alla grande.

Questo articolo mostra un esempio: http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

Ecco come apparirà il tuo foglio di stile:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Per parafrasare uno dei miei siti Web che fa qualcosa di simile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

basta usare un indice z e tutto andrà bene. assicurarsi di avere le posizioni contrassegnate come fisse o assolute. quindi nulla si muoverà come con un tag float.