Cómo alinear dos elementos en la misma línea sin cambiar HTML

Tengo dos elementos en la misma línea flotando a la izquierda y flotando a la derecha.

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

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

Necesito que element2 se alinee junto a element1 con aproximadamente 10 píxeles de relleno entre los dos. El problema es que el ancho de element2 puede cambiar según el contenido y el navegador (tamaño de fuente, etc.), por lo que no siempre está perfectamente alineado con element1 (no puedo simplemente aplicar un margen derecho y moverlo).

Tampoco puedo cambiar el marcado.

¿Existe una forma uniforme de alinearlos? Probé el margen derecho con un porcentaje, probé un margen negativo en el elemento1 para acercar el elemento2 (pero no pude hacerlo funcionar).

Utilizando display:inline-block

#element1 {display:inline-block;margin-right:10px;} 
#element2 {display:inline-block;} 

Ejemplo

<style>
div {
    display: flex;
    justify-content: space-between;  
}
</style>

<div>
    <p>Item one</p>
    <a>Item two</a>
</div>  

#element1 {float:left;}
#element2 {padding-left : 20px; float:left;}

violín: http://jsfiddle.net/sKqZJ/

o

#element1 {float:left;}
#element2 {margin-left : 20px;float:left;}

violín: http://jsfiddle.net/sKqZJ/1/

o

#element1 {padding-right : 20px; float:left;}
#element2 {float:left;}

violín: http://jsfiddle.net/sKqZJ/2/

o

#element1 {margin-right : 20px; float:left;}
#element2 {float:left;}

violín: http://jsfiddle.net/sKqZJ/3/

referencia: La diferencia entre los márgenes CSS y el relleno

Utilizando display: inline-block; Y de forma más general, cuando tiene un padre (siempre hay un padre excepto para html), utilice display: inline-block;para los elementos internos. y obligarlos a permanecer en la misma línea incluso cuando la ventana se encoja (se contraiga). Agregue para el padre las dos propiedades:

    white-space: nowrap;
    overflow-x: auto;

aquí un ejemplo más formateado para que quede claro:

.parent {
    white-space: nowrap;
    overflow-x: auto;
}

.children {
   display: inline-block;
   margin-left: 20px; 
}

Para este ejemplo en particular, puede aplicar lo anterior como compañero (supongo que el padre es body. Si no pone el padre correcto), también puede cambiar el html y agregar un padre para ellos si es posible.

body { /*body may pose problem depend on you context, there is no better then have a specific parent*/
        white-space: nowrap;
        overflow-x: auto;
 }

#element1, #element2{ /*you can like put each one separately, if the margin for the first element is not wanted*/
   display: inline-block;
   margin-left: 10px; 
}

tenga en cuenta que white-space: nowrap;y overlow-x: auto;es lo que necesita para obligarlos a estar en una línea. espacio en blanco: nowrap; deshabilitar la envoltura. Y overlow-x: auto; para activar el desplazamiento, cuando el elemento supera el límite de fotogramas.

En los casos en los que uso elementos flotantes como ese, generalmente necesito estar seguro de que el elemento contenedor siempre será lo suficientemente grande para los anchos de ambos elementos flotantes más el margen deseado para que quepan todos dentro de él. La forma más fácil de hacerlo es obviamente dar a ambos elementos internos anchos fijos que encajarán correctamente dentro del elemento externo de esta manera:

#container {width: 960px;}
#element1  {float:left; width:745px; margin-right:15px;}
#element2  {float:right; width:200px;}

Si no puede hacer eso porque este es un diseño de ancho de escala, otra opción es hacer que cada conjunto de dimensiones sea porcentajes como:

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:20%;}

Esto se vuelve complicado cuando necesitas algo como esto:

#element1 {float:left; width:70%; margin-right:10%}
#element2 {float:right; width:200px;}

En casos como ese, encuentro que a veces la mejor opción es no usar flotadores y usar posicionamiento relativo / absoluto para obtener el mismo efecto como este:

#container {position:relative;} /* So IE won't bork the absolute positioning of #element2 */
#element1 {margin-right:215px;}
#element2 {display: block; position:absolute; top:0; right:0; height:100%; width:200px;}

Si bien esta no es una solución flotante, da como resultado columnas una al lado de la otra donde tienen la misma altura, y una puede permanecer fluida mientras que la otra tiene un ancho estático.

Cambie su CSS de la siguiente manera

#element1 {float:left;margin-right:10px;} 
#element2 {float:left;} 

Aquí está JSFiddle http://jsfiddle.net/a4aME/

Esto es lo que usé para un tipo de caso de uso similar al tuyo.

<style type="text/css">
#element1 {display:inline-block; width:45%; padding:10px}
#element2 {display:inline-block; width:45%; padding:10px}
</style>

<div id="element1">
 element 1 markup
</div>
<div id="element2">
 element 2 markup
</div>

Ajuste su ancho y acolchado según sus necesidades. Nota - No exceda el 'ancho' más del 100% en total (ele1_width + ele2_width) para agregar 'relleno', manténgalo por debajo del 100%.