No, but I did write something better for someone else (which shows how to make equal-height columns using floats and margins).
Here’s what you need to do. First, start with a container that will hold your Web page. When you code your content DIV, add another DIV directly inside it, and give it a class of “wrapper”.
<div id="container">
<!-- header and menu code go here -->
<div id="content">
<div class="wrapper">
<!-- main page content goes here -->
</div>
</div>
<div id="sidebar">
<!-- Sidebar Content Goes Here -->
</div>
<!-- footer code goes here -->
</div>
Reset your margins and padding, then give your #container selector a background color. This must match the content wrapper’s background color later on. Please forgive the ugly pastels, they’re being used only for demonstration purposes.
* {
margin: 0;
padding: 0;
}
#container {
background: #FFF;
color: inherit;
}
Next, give the Content DIV the background color that will appear in the sidebar (yes, the sidebar); then float it to the left and set its width to 100%. Don’t add any borders, margins or padding here other than a negative margin equal to the width of the sidebar; otherwise you’ll break the layout (if you want to add a border, adjust your margins accordingly). In this case, the margin will be -200px wide and will be applied to the right side.
#content {
background: #99C;
color: inherit;
float: left;
margin: 0 -200px 0 0;
width: 100%;
}
Now add the style rules for the content wrapper. Remember to match the #container rule’s background color to the wrapper, then set the right margin to be the same as the negative margin in its parent (200px). Then set overflow to hidden (to contain any floats inside the content wrapper); if you want to add padding (to perhaps create some white space), do so now.
#content .wrapper {
background: #FFF;
margin: 0 200px 0 0;
overflow: hidden;
padding: 10px 0 10px 10px; /* optional, feel free to remove */
}
Finally, add the sidebar’s CSS code. All you have to do here is repeat the background color declared in the Content selector, float it to the left, and give it a width equal to the margin that was set previously in Content .wrapper (200px in this case).
#sidebar {
background: #99C;
color: inherit;
float: left;
width: 200px;
}
This will work in every browser without any need for conditional comments or hacks when done correctly. If you want the sidebar to appear on the left, float Content to the right and set the margins to the left instead of the right, like this example:
#content {
background: #99C;
color: inherit;
float: right;
margin: 0 0 0 -200px;
width: 100%;
}
#content .wrapper {
background: #FFF;
margin: 0 0 0 200px;
overflow: hidden;
padding: 10px 0 10px 10px; /* optional, feel free to remove */
}
Just make sure you clear both sides of the content you don’t want floated afterword using clear; both; (such as a footer). Note that you may have to add height: 1%; to the non-floated element following the two columns in order to trip hasLayout in Internet Explorer 5.x and 6.
In your particular case though, just replace <div id=“sidebar”></div> and #sidebar with <ul id=“menu”></ul> and #menu, respectively.