Hola, si colocas width:auto y margin-right (igual al width del aside) al div contenedor, y posteriormente los flotas a la izquierda estos deberían colocarse correctamente.
Código CSS:
Ver original#principal {
box-sizing: border-box;
display: inline-block;
width: auto;
margin: 0;
margin-right: 300px; /* Longitud del aside */
float: left;
}
#aside {
box-sizing: border-box;
display: inline-block;
width: 300px;
float: left;
margin: 0;
}
No olvides colocar overflow:hidden al contenedor de estos dos para evitar que su ancho y largo se vuelva cero.
También es importante usar box-sizing border box si no quieres tomar medidas de los paddings y demás cosas manualmente.
Nota: Lo interesante de este método es que no requiere características de CSS3 como calc() o flexbox, más que el box-sizing que como he mencionado arriba
es opcional.