4 column relative width layout

How do you create a 4 column relative width layout?
http://www.webmasterworld.com/css/3006842.htm

<-- Column --><-- 20px gap --><-- Column --><-- 20px gap --><-- Column --><-- 20px gap --><-- Column -->

This layout will be the width of the screen and the columns will be of equal width. Obviously this will change dependent on the width of the browser.

So, how do I achieve this using CSS only?


This is column one. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ac metus vel magna volutpat posuere. Duis ligula elit, mattis eget, blandit eu, elementum et, felis. Maecenas dictum metus nec eros. Aenean malesuada mattis sem. Mauris pretium suscipit nisl. Quisque lacus.
This is column two. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ac metus vel magna volutpat posuere. Duis ligula elit, mattis eget, blandit eu, elementum et, felis. Maecenas dictum metus nec eros. Aenean malesuada mattis sem. Mauris pretium suscipit nisl. Quisque lacus.
This is column three. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ac metus vel magna volutpat posuere. Duis ligula elit, mattis eget, blandit eu, elementum et, felis. Maecenas dictum metus nec eros. Aenean malesuada mattis sem. Mauris pretium suscipit nisl. Quisque lacus.
And this is column four. All columns should be equal. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In ac metus vel magna volutpat posuere. Duis ligula elit, mattis eget, blandit eu, elementum et, felis. Maecenas dictum metus nec eros. Aenean malesuada mattis sem. Mauris pretium suscipit nisl. Quisque lacus.