Crazyloonybin Crazyloonybin - 5 months ago 14
CSS Question

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

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

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.
Comments