Overlapping div-col's if using percentages

[michael]

I've got a 3-column layout using percentages to define width of each
div-column.

#left-col { width: 20%; background-color: green; float:left; }
#center-col { width: 60%; background-color: blue; float:left; }
#right-col { width: 20%; background-color: green; float:left; }

Problem I find is if the combined content of all 3 columns happens to be
wider than the total size of the browser window the div's don't get stacked
on top of each other as they would if using fixed pixel width for each
column, but instead they overlap. Is there a way around this and still use
percentages? So if combined width's of the 3 colums exceeds total width of
the window to somehow force otherwise overlapping div's to stack vertically?

<div id="left-col">
Hail to the sun god
He sure is a fun god
Ra! Ra! Ra!
<img src="a400pixwid thimage.gif">
</div>

<div id="center-col">
<img src="a200pixwid thimage.gif">
To get something done, a committee should consist of no more than three
men, two of them absent.
</div>

<div id="right-col">
<img src="a100pixwid thimage.gif">
Ten years of rejection slips is nature's way of telling you to stop
writing. -- R. Geis
</div>