Pixel e largura percentagem divs lado-a-lado

Question

Eu encontrei um monte de perguntas semelhantes, e experimentou várias soluções (incluindo alguns dos chamados "Santo Graal" layouts CSS), mas eles não chegam a fazer o que eu preciso.

Eu tenho uma div contendo (a contendo bloco CSS) com right id. Dentro dele, no lado esquerdo, eu quero uma largura fixa div (a barra de divisão, mas não importa o que ele está sendo usado para; splitpane id); à direita, enchendo o resto do espaço, outra div (right-box id abaixo).

Eu tentei fazer a display: inline-block duas divs internos (com vertical-align: top), definindo o esquerdo para width: 3px, mas então não há nenhuma maneira de definir o direito de ter 100% de largura - 3px. Eu também tentei usando o / truque float: left margin-left: -100% / margin-left: 3px, mas tem o mesmo problema: a 100% mais a 3px transborda o pai contendo bloco e faz com que uma barra de rolagem para aparecer. (Claro, não é a barra de rolagem em si que é o problema;. Eu poderia usar overflow: hidden para removê-lo, mas depois de conteúdo à direita seria truncado)

Atualmente estou usando width: 99.5% para a div direita, mas isso é um terrível corte (e está sujeita a estouro dependendo da largura da tela). Parece um pouco como isto:

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

Com CSS da seguinte forma (versão float, mas a versão inline-block é similar):

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

Será que é mesmo possível fazer isso? Isto é para um aplicativo interno., Pelo que as soluções só precisa de trabalho no Firefox 3 (se eles são específicos para FF3, embora, de preferência, é porque a solução é compatível com os padrões, mas outros navegadores não são, não porque ele está usando Firefox somente código).

Answer 1

Isso é possível. Como os elementos nível de bloco expandir automaticamente para ocupar todo o espaço horizontal restante, você pode utilizar um elemento de nível de bloco ao lado de um elemento flutuado uncleared com a sua largura desejada.

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

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

Answer 2

DIVs são o tipo de elemento errado para isso desde que eles não "falar" uns com os outros. Você pode conseguir isso facilmente com uma tabela:

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

A 100% fará com que o rightBox tão amplo quanto possível, mas dentro dos limites da tabela.

Answer 3

por que você não use margin-left (desde que foi traçado float) na caixa direita?

então não há necessidade de criar um divisor de div ...

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

sim algo assim, eu odeio div vazio, não é semântica e é como colocar um divisor no caminho "velho" table

Answer 4

Se a div # caixa-direita só vai conter conteúdo não soltaram a informação pode ser uma idéia para apenas colocar o conteúdo dentro #right vez e deixá-lo envolver o #splitpane flutuou.