Before we can write the XHTML, though, we need to calculate a few widths - particularly that of our sidebar and of our main content div.
The sidebar div: This is simple. We just pick the width we want. For this example, I'll use 150px.
The content div: This gets a little more complex. Here's the formula for calculating the content box's width: 600px - sidebar width - sbText left padding - sbText right padding - content left border = content width. So, 600-150-10-10-1=429.
We'll also create a little image that will serve as our toggle button. The one I've created here is 10px x 100px and I named it "toggle.jpg".
Now that that's out of the way, we can move on to the actual XHTML.
<div id="container"> <div id="sidebar" style="width:150px;"> <div id="handle"> <img src="toggle.jpg" width="10" height="100" border="0" alt="Click to toggle the sidebar" onclick="toggle()" /> </div> <div id="sbText" style="display:block;"> <p>Sidebar Content</p> </div> </div> <div id="content" style="width:429px;"> <p>Main Content</p> </div> </div>