Hacer un ancho de expansión automática div a la izquierda en lugar de la derecha

Tengo un div en mi sitio web que contiene una lista de elementos que actúa como un menú. He establecido el width:auto CSS width:auto para que se redimensione si un elemento del menú es demasiado largo. Sin embargo, en este momento, esto se expandirá a la derecha y “empujará” el rest de mi contenido a la derecha también.

Esto es difícil de explicar, por ejemplo, si visita http://redsquirrelsoftware.co.uk/ y hace clic en el elemento del menú Soporte, puede ver el contenido que se está enviando. Lo que quiero que suceda es que el div se expanda al espacio en blanco a la izquierda del menú.

El CSS que tengo para el div en este momento es:

 .sidebar1 { float: left; width: auto; min-width: 25%; max-width: 29%; margin-top: 65px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 12px; } 

¿Hay alguna manera de que se expanda hacia otro lado? Gracias por adelantado.

Esta idea necesita pruebas, pero funciona en Chrome al menos:

  • Cambie .content y .sidebar1 a float: right lugar de float: left .
  • En el HTML, mueva .sidebar1 después de .content .

Otra forma que encontré para hacer esto sin usar flotadores o posicionamiento absoluto es usar direction: rtl en el padre y luego restablecerlo en los hijos:

 .parent { direction: rtl; } .parent > * { direction: ltr; } .child { width: 200px; } .child:hover { width: 400px; } 

Código de la pluma: http://codepen.io/heisters/pen/gMgboJ

(lo siento, no pude basar el ejemplo en el sitio del OP, ya que el enlace parece estar muerto).