The JavaScript:

Get ready to do a little more math here. We know the width of our content
div when the sidebar is expanded should be 429px. Now we need to determine
what its width will be when the sidebar is collapsed. To do thhis, we must
first know the width of the collapsed sidebar. Again, we can choose any
value we like (it should be relatively small, though). I'm using 15px.

Great. Now, plop the script into the HEAD section of your page and we're
all set.

Let's see it in action. (Note: I've added a
few additional style elements and filler text simply for appearance purposes.)

While it may seem a bit complicated at first, especially if you're a beginner,
the more time spent studying the code, the simpler it will become. As with
anything, the best way to learn is to practice, so feel free to experiment
with the code, play around and get your hands dirty. I think you'll find
that slight modifications on this technique yield all sorts of possibilities.
Here are a couple of ideas.

Challenge #1: Take what you've learned here and make collapsing
and expanding divs that stack and fold vertically.

Thanks for reading, and I hope you enjoyed the tutorial. Additional articles
that I have written may be found at www.kellishaver.com.

Kelli Shaver is a designer/developer from Morehead, KY where she resides
with her husband, daughter, two dogs and one fish named Norman. Kelli holds
a degree in fine art and has been designing web sites as a hobby for 8 years
and professionally for four.