Webpage layout without tables

The HTML5 standard states unequivocally that tables should not be used for layout. Yesterday, I was working on a old website of mine that used tables for that purpose and decided to remove them to conform with the standard. Not being a very experienced web-designer, I thought it would be a simple matter of replacing a lot of table tags with divs and finding the right CSS properties. Evidently, this is much easier said than done.

Originally, my webpage two table columns. The first had the navigation sidebar, and the second had the main content of the page. I could not figure out how to get proper columns with just CSS and divs. Making the sidebar float: left worked except that then the content of the page started wrapping around the bottom of it. Of course, I couldn't find any CSS to get a float to take up the whole height of its container. In the end, I resorted to setting a left margin on the content wider than width of sidebar, which made the two pieces stay out of each other's way.

I'm curious as to what real web-designers say about this problem. There must be some trick I'm missing. It seems many sites, like python.org, are forced to resort to position: absolute tricks to get nice sidebars. I also wonder if the supposed problem with table layouts, that screen readers have trouble with them, could be alleviated by adding a role="layout" attribute to tables. It's a case of "practicality beats purity" if I ever saw one.