Say I have the following DIVs:

```
<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>

```

How can I use CSS to place the sidebar DIV to the right of the main DIV, and set it to, say, 20% of the total width?

I'd also like to have some margins between the four DIVs, so that the layout doesn't look too cramped.

Would like it to work in "all" browsers, including that bastard IE6...