CODEWITHSUNDEEP
css
user2252219
user2252219

Reputation: 865

Keeping fixed sidebar 79% from left but still have no white space

I want to keep a rotated fixed sidebar exactly 79% from the left but when I add white-space: nowrap; it messes up the location. Perhaps its easier to get the sidebar to stay exactly a # of px's away from a middle div?

https://jsfiddle.net/cs6bya2g/embedded/result/

#sidebar-miniright {
position: fixed;
top: 50%;
left:79%;
width:25%;
/* Safari */
-webkit-transform: rotate(-270deg);
/* Firefox */
-moz-transform: rotate(-270deg);
/* IE */
-ms-transform: rotate(-270deg);
/* Opera */
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}

.sidebar-right {
width:auto;
}

enter image description here

enter image description here

^ This is what I want always. But when I resize browser it becomes like the following pic. When I add white-space: nowrap; it causes the left: 79%; to become wonky.

Upvotes: 1

Views: 51

Answers (1)

clickbait
clickbait

Reputation: 2998

Your sidebar element is rotated on its side, which means width: 25% will make the sidebar's height be 25% the width of the window.

A solution is to delete the width: 25% rule. Update your transform properties to:

-webkit-transform: rotate(-270deg) translateX(-50%);
-moz-transform: rotate(-270deg) translateX(-50%);
-ms-transform: rotate(-270deg) translateX(-50%);
-o-transform: rotate(-270deg) translateX(-50%);
transform: rotate(-270deg) translateX(-50%);

This will center the sidebar text vertically. You can play around with the translateX values to get the desired result.

Upvotes: 1

Related Questions