Reputation: 945
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
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
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
Reputation: 228302
This idea needs testing, but it works in Chrome at least:
.content
and .sidebar1
to float: right
instead of float: left
..sidebar1
after .content
.Upvotes: 3