The colour of this column is the colour of the background to the wrapper for the first 2 cols. So this col needs to let this wrapper's background shine through. It will do so by default if no background colour is set on the col, or if transparent is set. The yellow will extend right down because the wrapper is itself floated and this causes it to be a Block Formatting Context, meaning, according to one mnemonic story that it grows height for its floated children because it is a float itself and understands not to leave its children hanging out of the house in the weather. <g>
This col needs an explicit colour set for its background, it is the longest column and the second floated child of the wrapper for the first 2 cols.
And there is a sure fire way of making it the longest column. Watch this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque augue.Suspendisse consectetuer velit nec neque. Duis nec orci quis nulla egestas fermentum.Ut quis eros. Aenean at augue vitae quam posuere vehicula. Pellentesque habitantmorbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas justonunc, porta sed, molestie eget, adipiscing id, ante. Cum sociis natoque penatibus etmagnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Nunc blanditmagna id odio sodales luctus. Nulla quam magna, viverra quis, dignissim blandit, viverra nec, odio.
Now, this column simply gets the colour of the background of the main wrapper to all three columns. Perhaps this will sum up this page:
There is a main parent container with 2 children, A and B. A itself is a div with 2 children of its own. The main container presents the appeaence of 3 columns by way of its two grandchildren and its own child. There are no doubt several other ways of saying this.
Here is a way to make columns appear to be of equal length with their own backgrounds: with 1 px high images. For where you do not know which is the longest.