CSS 3 DIVs en una fila: 2 arreglar 1 auto ajustar

Question

Estoy tratando de encontrar la manera de crear 3 divs y alinearlos en la misma fila. Tener el 1er y 3er ancho fijo a 100px y tener el 2do (medio) uno audo ajustar su ancho en caso de cambiar el tamaño del navegador.

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div> 

gracias,

Answer 1

http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

huelga que, muchos divs adicionales para asegurarse de que todas las columnas son la misma altura. This may be what you're looking for. Todo se explica en este excelente artículo: http://www.alistapart.com/articles/holygrail

Answer 2

Usted tiene el uso tp flota para alinear la izquierda y la derecha del marco. Pero para esto debes reordenar los divs como se muestra a continuación, y establecer los márgenes para el div medio.

<style type="text/css"> 
#d1 { 
    float: left; 
} 

#d2 { 
    float: right; 
} 

#d3 { 
    margin-left: 100px; 
    margin-right: 100px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d2"> content 2</div> 
    <div id="d3"> content 3</div> 
</div> 

Editar

Gracias a Leniel Macaferi para señalar un error. El orden correcto de div s tiene que ser flotante div s primero, luego no flotante div s. Por lo tanto, corrigí el código (intercambié div d2 y div d3).

Answer 3

NVM esto es viejo, iba a cargo de lo que funcionó para mí

<style type="text/css"> 
#d1 { 

    float: left; 
    margin-left: 50px; 

} 

#d2 { 
    float: center; 
    margin-right: 5px; 
} 

#d3 { 
float: left; 
margin-right: 5px; 
} 
</style> 

<div> 
    <div id="d1"> content 1</div> 
    <div id="d3"> content 3</div> 
    <div id="d2"> content 2</div> 
</div> 

Answer 4

Div es un elemento en bloque, así que es una buena opción para manejar el ayuda de su propiedad de visualización

<div id="d1" style="display:inline-block; width:100px;">content1</div> 
<div id="d2" style="display:inline">content2</div> 
<div id="d3" style="display:inline-block; width:100px;">content3</div>​ 

Answer 5

sólo poner esto por ahí como una solución moderna, limpia: utilizar calc. violín: http://jsfiddle.net/bg7KS/

#d2 { 
    width: 200px; /* fallback older browsers */ 
    width: -webkit-calc(100% - 200px); 
    width: -moz-calc(100% - 200px); 
    width: calc(100% - 200px); 
}