Píxeles y porcentajes de ancho en paralelo

Question

Encontré muchas preguntas similares y probé varias soluciones (incluidas algunas de las llamadas "CSS santo grial"), pero no hacen lo que necesito.

Tengo un div que contiene (un bloque que contiene CSS) con id right . En su interior, en el lado izquierdo, quiero un div de ancho fijo (una barra separadora, pero no importa para qué se esté utilizando; id splitpane ); a la derecha, llenando el resto del espacio, otro div (id right-box debajo).

He intentado hacer que las dos divisiones internas se visualicen: bloque en línea (con vertical-align: top ), configurando el izquierdo a ancho: 3px , pero no hay forma de establecer el derecho para tener un ancho del 100% - 3px. También he intentado usar el flotador float: left / margin-left: -100% / margin-left: 3px , pero tiene el mismo problema: el 100% más el 3px desborda el bloque que contiene el padre y hace que aparezca una barra de desplazamiento. (Por supuesto, no es la barra de desplazamiento per se el problema; podría usar overflow: hidden para eliminarlo, pero luego el contenido de la derecha se truncaría).

Actualmente estoy usando width: 99.5% para el div correcto, pero es un hack terrible (y está sujeto a desbordamiento dependiendo del ancho de la pantalla). Se parece un poco a esto:

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

Con CSS de la siguiente manera (versión flotante, pero la versión en bloque en línea es 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;
}

¿Es posible hacer esto? Esto es para una aplicación interna, por lo que las soluciones solo deben funcionar en Firefox 3 (si son específicas de FF3, sin embargo, preferiblemente es porque la solución cumple con los estándares, pero otros navegadores no, no porque esté usando solo Firefox código).

Answer 1

Esto es posible. Debido a que los elementos de nivel de bloque se expanden automáticamente para ocupar cualquier espacio horizontal restante, puede utilizar un elemento de nivel de bloque junto a un elemento flotante sin limpiar con el ancho deseado.

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

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

Answer 2

Los DIV son el tipo de elemento incorrecto para esto, ya que no "hablan" el uno al otro. Puede lograr esto fácilmente con una tabla:

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

El 100% hará que rightBox sea lo más ancho posible pero dentro de los límites de la tabla.

Answer 3

¿por qué no usó margen izquierdo (ya que era diseño flotante) en el cuadro derecho?

así que no es necesario crear un divisor divisor ...

#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í, algo así, odio el div vacío, no es semántico y es como poner un divisor en el "viejo" forma de tabla

Answer 4

Si el div # right-box solo va a contener contenido no flotante, podría ser una idea colocar el contenido dentro de #right en su lugar y dejar que se enrolle alrededor del #splitpane flotante.