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:
Code:
	.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.