Dynamically stretch content based upon number of fixed-width columns

Question

I've worked with CSS enough that I can get columns to work alongside content if I have a set number of columns: I simply define the sidebar(s) in the HTML prior to the content, and specify that they float to the left or right, while giving the content a margin-left or -right such that it doesn't flow into the space below the end of the sidebar.

I have a new challenge though, whereby the number of columns may vary between pages. In my HTML, I don't want to specify the sidebar content prior to the main page content though, which is the only way I know how to do it.

Essentially, I want the HTML to look like this:

<div id="container">
    <div id="content">
        <!-- Main body content goes here. -->
    </div>
    <div class="sidebar">
        <!-- Sidebar DIV should appear to the right of the content DIV. -->
    </div>
    <div class="sidebar">
        <!--
            Another sidebar DIV, with this one *preferably* appearing to the
            right of the one above, since it appears lower in the code and is
            assuming LTR.  I'm open to CSS that makes this sidebar appear to
            the left instead of the right, however.
        -->
    </div>
    <!-- Any number of additional sidebar DIV's can appear here. -->
</div>

I'm not sure if I should be trying to float the content/sidebar DIV's, make them position absolute, specify the width, etc. to make the content stretch automatically with the variable number of sidebars. It's probably worth noting that the size of each sidebar will be constant.

div.sidebar {
    width: 100px;
}

On final note: if there's an improvement I can make to the HTML that will help, (e.g.: surrounding all the sidebar DIV elements in a parent DIV such as <div id="sidebars">), I'm open to suggestions there as well.

Answer 1

I guess I'll have to accept the fact that this requires HTML tables since no one can offer a CSS solution for this.