Flexible CSS Column/Boxes

[Strategos]

I'm currently redesigning a website for someone and the redesign is absolutely necessary. The site was horribly, horribly coded. The designer used tables as the basis, made a picture gallery by pasting a ton of pictures into one big one and using the map tag to create different links, and has an average of 10 validation errors in each simple, purely HTML page. There's a header, a menu, then a content area. The content is divided into two columns, but the two columns aren't the same widths. I'm redesigning the site with CSS and valid markup, but I'm having trouble making these two columns flexible so that they automatically adjust to the width. The width of the site is 1000 pixels for now, and that contains the two columns. I want the left column to be the width necessary to hold the content in it and have the right column fill up the rest. The reason is that the left column always has an image, but the image will vary in dimension. The right contains text. Is there a way I can make the columns flexible? Here's the code I'm using for the columns.

#left {
float: left;
margin: 1em;
voice-family:inherit;
}

#right {
float: left;
margin: 1em;
padding:0;
voice-family:inherit;
}

[Vance]

I am certainly no expert, but maybe take a look HERE to see if Wickham addresses what you are trying to accomplish.

If that doesn't work, you can also have a look HERE to see if it works.

If neither of these helps, I don't know where to direct you. If nothing else, maybe bumping this up will get you some help.

Good luck,
Vance