CODEWITHSUNDEEP
csshtml
crazyloonybin
crazyloonybin

Reputation: 945

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.

Upvotes: 13

Views: 31912

Answers (3)

user19902512
user19902512

Reputation: 1

Try this

.sidebar1{
   right:0;left:inherit;
}

this should be applied to the div(menu) which are on the right side of your screen

Upvotes: -1

Ian
Ian

Reputation: 2108

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

Upvotes: 15

thirtydot
thirtydot

Reputation: 228302

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.

Upvotes: 3

Related Questions