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.
So, the formula for our width with the sidebar collapsed will be: 600px - sidebar collapsed width - sbText left padding - sbText right padding - border = content width. So, 600-15-10-10-1=564.
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.