How do you force an unordered list and a div with a table side by side?

Question

Not only that but also keep them side by side no matter how the window resizes. Will I have to use a table to accomplish this? Is there a better way?

Note: HTML 4 and HTML 5 answers welcomed.

An example of what I'm working with.

Answer 1

if you had the following styles set you should be fine:

.page
{
    width: 100%;
}

#sidebar
{
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    width: 20%;
}

#main
{
    padding: 0;
    margin: 0;
    float: left;
    display: block;
    width: 80%;
}

if you want some space between these elements account for it in your style:

#main
{
    padding: 0 0 2% 0;
    margin: 0;
    float: left;
    display: block;
    width: 78%;
}

You'll also want to clear the floats after #main with a <div style="clear: left"></div> or a clearing element or wrap them in another element which has a clearfix style