css - 3 column layout - col2 displays first, could be col1

[competitions]

Hello


I'm attempting a 3 column div layout using percentages.


In the html I have the div cols in order: col1, col2, col3


In the css I have:


.threecol .col1 {
width:46%; /* width of center column content (column width minus padding on either side) */
left:102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width:21%; /* Width of left column content (column width minus padding on either side) */
left:31%;
} /* width of (right column) plus (center column left and right padding) plus (left column left padding) */

.threecol .col3 {
width:21%; /* Width of right column content (column width minus padding on either side) */
left:85%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}


I can't get my head around the commented sections in the above css and what they mean.

I know left is in from the margin, width is how far it spans across.

My main question is:
- how do I alter the css so that the html shows col1, col2, col3 instead of col2, col1, col3 when browsing to the page?
- secondly, is there an easier way to explain what the css quoted above is doing so that when I need to alter the percentages for the columns, that I get it right so the column text displays correctly!

My test page is: http://www.lottos.com.au/ indextest300309.php (space inserted between domain and page on purpose).

Thanks in advance for any code fixes and advice.