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

glenn romaniuk
glenn romaniuk
33,738 Points
Posted by glenn romaniuk
glenn romaniuk
33,738 Points

sidebar slideout transition and preventing elements from wrapping

has a sidebar on the left and the content on the right clicking the menu button transitions the content over to the right to display the underlying sidebar this is the looks were after when it invoke the mechanism it changes the size of the content area and as a result p's, and other elements will resize. I want it to appear like the content is transitioning off the right of the screen. I've played around with a style that sets the max-width of the elements contained in the content area but this could involve allot of work. Is there an easier way to fix the containing elements to their current size and then roll the contents to the right?

source code https://gist.github.com/anonymous/b02e78e207d0eb33613b

1 Answer

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

I think this is what you are wanting:

.content {
    margin-left: 0;
    height: 100%;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    color: #7BCDC8;
    transition-duration: 0.25s;
}

The only thing I did was add a width: 100%; to the .content section. This sets the with of .content to be whatever is 100% of the browser window, so when you slide it over for the sidebar, it remains at 100% of the browser width, giving the effect that I think you are wanting.