Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Catherine Wentworth
Catherine Wentworth
7,411 Points

Fixed items on left AND right of browser

I'm putting together a very simple portfolio site; there will be only two navigation links, ABOUT and INDEX (in this case index means an index/portfolio of the person's work). I want ABOUT to be fixed on the left side of the browser and INDEX on the right (both centered vertically).

I'm using Bootstrap and overriding styles as necessary with custom CSS.

The relevant HTML looks like this:

<div class="sidebars">
    <a class="sidebar-left position-fixed float-left" href="about.html">ABOUT</a>
    <a class="sidebar-right position-fixed float-right" href="portfolio.html">INDEX</a> 
</div>

And the corresponding CSS looks like this:

.sidebar-left {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 99;
    }

.sidebar-right {
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: 99;    
    }

The ABOUT link on the left is in the correct position, but the INDEX link sits directly on top of it. The .float-right Bootstrap class seems not to make a difference for the INDEX link on the right side. I've tried just not using Bootstrap's float classes and positioning them myself with regular ol' CSS, but I'm having trouble figuring that out as well.

Can anyone help?

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Assuming that the .position-fixed class gives the elements a position: fixed, floating wouldn't help you here.

Try just adding a right: 0 or similar so it attaches to the right side of the screen. Note that because it's being rotated, it might not be exactly where you need it.

Try this:

.sidebar-left {
    top: 50%;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 99;
}

.sidebar-right {
    right: 0;
    top: 50%;
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    z-index: 99;    
}
Catherine Wentworth
Catherine Wentworth
7,411 Points

This did the trick! Thank you, Iain!

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

No problem!