Div in pixel e in larghezza percentuale fianco a fianco

Question

Ho trovato molte domande simili e ho provato diverse soluzioni (tra cui alcuni dei cosiddetti layout CSS "Santo Graal"), ma non fanno proprio quello di cui ho bisogno.

Ho un div contenente (un blocco contenente CSS) con id right . Al suo interno sul lato sinistro, voglio un div a larghezza fissa (una barra di divisione, ma non importa per cosa viene utilizzato; id splitpane ); a destra, riempiendo il resto dello spazio, un altro div (id riquadro a destra in basso).

Ho provato a far visualizzare i due div interni : inline-block (con vertical-align: top ), impostando quello sinistro su width: 3px , ma non c'è modo di impostare il diritto per avere una larghezza del 100% - 3px. Ho anche provato a usare il trucco float: left / margin-left: -100% / margin-left: 3px , ma ha lo stesso problema: il 100% più il 3px trabocca il blocco contenente il genitore e fa apparire una barra di scorrimento. (Certo, non è la barra di scorrimento in sé il problema; potrei usare overflow: hidden per rimuoverlo, ma poi il contenuto a destra verrebbe troncato.)

Attualmente sto usando width: 99,5% per il div giusto, ma è un hack terribile (ed è soggetto a overflow a seconda della larghezza dello schermo). Sembra un po 'così:

<div id="right"><div id="splitpane"></div><div id="right-box">
  ...
</div></div>

Con CSS come segue (versione float, ma la versione inline block è simile):

#right {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 85%;  /* this is part of a larger div */
}
#right-box {
  width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
  height: 100%;
}
#splitpane {
  float: left;
  width: 3px;
  height: 100%;
  background: white;
  border-left: solid gray 1px;
  border-right: solid gray 1px;
  cursor: e-resize;
}

È anche possibile farlo? Questo è per un'app interna., Quindi le soluzioni devono funzionare solo in Firefox 3 (se sono specifiche per FF3, tuttavia, preferibilmente è perché la soluzione è conforme agli standard ma altri browser non lo sono, non perché utilizza solo Firefox codice).

Answer 1

Questo è possibile. Poiché gli elementi a livello di blocco si espandono automaticamente per occupare qualsiasi spazio orizzontale rimanente, è possibile utilizzare un elemento a livello di blocco accanto a un elemento mobile non cancellato con la larghezza desiderata.

<style type="text/css">
    div {
        height: 100px;
    }
    #container {
        width: 100%;
    }
    #left {
        background: #FF0;
    }
    #splitpane {
        position: relative;
        float: right;
        background: #000;
        width: 3px;
    }
</style>

<div id="container">
    <div id="splitpane"></div>
    <div id="left"></div>
</div>

Vedi http://jsfiddle.net/georeith/W4YMD/1/

Answer 2

I DIV sono il tipo di elemento sbagliato per questo poiché non " talk " l'un l'altro. Puoi farlo facilmente con una tabella:

<table style="width:200px">
<tr>
    <td id="splitpane" style="width: 3px">...</td>
    <td id="rightBox" style="width: 100%">...</td>
<tr>
</table>

Il 100% renderà rightBox il più largo possibile ma entro i limiti della tabella.

Answer 3

perché non hai usato margin-left (dato che era un layout float) sulla casella di destra?

quindi non è necessario creare un div splitter ...

#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}

sì qualcosa del genere, odio il div vuoto, non è semantico ed è come mettere uno splitter sul "vecchio" modo tabella

Answer 4

Se la casella div # destra conterrà solo contenuti non floatati, potrebbe essere un'idea inserire semplicemente il contenuto all'interno di #right e lasciarlo avvolgere attorno allo #splitpane mobile.