Main Content
Credit Paul O'B for the overlapping float method that makes the equal height columns.
The width on the left column is 25% of the total #wrapper width and
is made by setting a 25% left margin on the #innerwrap div.
We have another div named #inner that is nested in that #innerwrap div.
That #inner div is floated and given a width of 100% so it fills the available space
which is now 75% of the main #wrapper width. The 100% width prevents the float from
shrinkwrapping and takes care of haslayout at the same time.
In that #inner div resides the floated #left column which will be
shifted with a negative margin into that 25% wide gutter we made. We need to make the left float
33.3% wide. If we set it at 25% we would only get 25% of the #inner div.
Since 3 x 25% = 75%, then 1/3rd is what we would need. One third (33.3%) of the #inner
div will work out to be 25% of the main #wrapper width.
Are you confused yet? I was too at first but if you look at the source code I'm sure it will help
you understand all this better. All of this text you are reading right now resides in a div named
#main. I did not mention it since it does not play a role in the percentage widths.