Make a div auto expand width to the left instead of the right

Question

I have a div on my website which contains a list of items which acts as a menu. I have set the CSS width:auto so that it will re-size if a menu item is too long. At the moment though, this will expand to the right and "pushes" the rest of my content to the right as well.

This is hard to explain so as an example if you go to http://redsquirrelsoftware.co.uk/ and click on the Support menu item, you can see the content being pushed across. What I want to happen is for the div to expand into the white space to the left of the menu.

The CSS I have for the div at the moment is:

.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;
}

Is there any way for it to expand the other way? Thanks in advance.

Answer 1

Another way I found to do this without using floats or absolute positioning is to use direction: rtl on the parent, and then reset it on the children:

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

Code pen: http://codepen.io/heisters/pen/gMgboJ

(sorry, I couldn't base the example on the OP's site, since the link appears to be dead).

Answer 2

This idea needs testing, but it works in Chrome at least:

• Change .content and .sidebar1 to float: right instead of float: left.
• In the HTML, move .sidebar1 after .content.