html - for - table css generator

¿Hay una desventaja de usar `display: table-cell`on divs?

Question

Lo que estoy tratando de lograr es tener un primer div de ancho fijo y un segundo div fluido que llenará el ancho restante del ancho del div principal.

<div class=''clearfix''>
  <div style=''float:left; width:100px;''>some content</div>
  <div style=''float:left''>some more content</div>
</div>

y en este todo todo parece bien y fluido.

<div style=''display:table''>
  <div style=''display:table-cell; width:100px;''>some content</div>
  <div style=''display:table-cell''>some more content</div>
</div>

Quiero seguir adelante con el segundo, pero siento que el segundo ejemplo me dará dolores de cabeza en el futuro.

¿Podría ofrecer algunas sugerencias o ideas?

Answer 1

Para que el primer ejemplo funcione, también debes hacer flotar el div que lo contiene, esto asegurará que ambos elementos se sientan como esperarías dentro de él. ¿No está realmente seguro de lo que quiere decir con ''es un dolor''?

Answer 2

Podrías hacer algo como esto. Pone su contenido principal primero. Puede usar una imagen de fondo css que se repita verticalmente en su contenedor principal de "contenido" para crear la ilusión de un fondo que se extiende hasta la columna de la izquierda.

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
</div>

Para extenderse a una columna de 3 columnas con centro fluido:

<div id="content" style="clear:both;">
    <div id="mainwrap" style="float:left; width:100%;">
        <div id="main" style="margin-left:100px; margin-right:100px;">
            Main content here
        </div>
    </div>
    <div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
        Left content here
    </div>
    <div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
        Right content here
    </div>
</div>

Answer 3

Una desventaja de usar table-row (muy relacionado con el OP) es que no se puede usar el margen / relleno en una fila.

Answer 4

display: table-cell es perfectamente correcto de usar, con solo un inconveniente ..

No funciona en IE7 (o IE6, pero ¿a quién le importa?): http://caniuse.com/#search=css-table

Si no necesita ser compatible con IE7, no dude en utilizarlo.

IE7 aún tiene cierto uso , pero debe revisar su Analytics y luego tomar una decisión.

Para responder a su caso de uso específico , puede hacerlo sin display: table-cell , siempre que no necesite la height para ajustar en función del contenido:

http://jsfiddle.net/g6yB4/

<div class=''clearfix''>
  <div style=''float:left; width:100px; background:red''>some content</div>
  <div style=''overflow:hidden; background:#ccc''>some more content</div>
</div>

(¿Por qué overflow: hidden ? Con: http://jsfiddle.net/g6yB4/3/ vs sin: http://jsfiddle.net/g6yB4/4/ )