View Full Version : Mistake In MJT 3 Column Layout Or Not?

09-01-2010, 02:06 PM
When I simulate the process of moving the coloured divs (http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks) in Photoshop, I find that moving column 2 (which according to MJT's markup is yellow) to the left by 30% does not mean the green layer (layer 3) becomes visible. Instead, I find that layer 2 (yellow) is hidden by the red layer (layer 1).

<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>

In the markup above, I deduce that container 1 (red layer) will appear topmost; container 2 (yellow) will be directly beneath that; and container 3 (green) will be bottommost in the stack.

Moving the containers into place with relative positioning

"Using relative positioning we now move the containers to their new locations. When each container is moved the divs become visible below. It is the layering and position of the coloured containers that create the background of the equal height columns. The container2 div is moved to the left by 30% to reveal the green right-hand column and the container1 div is moved to the left 40% to reveal the yellow center column and at the same time the red section that is still visible becomes the left-hand column."

According to this, moving container 2 would not look as it appears in the illustration:

(Image taken from article)

rather, it would appear in reality (my Photoshop experiment) to show the red layer still covering everything, while the yellow layer (container 2) moves underneath, not being visible due to the red layer (container 1) covering it completely. However, in the illustration it appears to me that he is moving container 1 (red; topmost layer) first - and this doesn't appear to be the case, as he has said he is moving container 2 first (which is yellow). Now, what appears is that the green layer is directly beneath the red but this doesn't make sense because in order to generate that result, I have to bring layer 3 (green) up one in the stack, so that they read: Red, Green, Yellow; rather than Red, Yellow, Green. I am very, very confused by this.

I'm not even sure if I've explained the above correctly but I'm posting it like this, due to time restraints.

The reason for making a Photoshop model to play around with is that I have dyscalculia (http://www.bdadyslexia.org.uk/about-dyslexia/schools-colleges-and-universities/dyscalculia.html), a form of 'numbers dyslexia, which means I have to invent alternative (mostly physical) methods of calculation to overcome this fact. In a sense, the Photoshop model I have invented is intended to work as a kind of 'visual abacus' to enable me to take MJT's concepts and work them out for myself to make this technique flexible for my own use.

So, because my limited ability to count, multiply and divide, percentages become a challenge, thus, I can never be totally sure of my own reckoning. Therefore, I am eager to know if you are able to find a mistake in Mathew's article or whether it is because of something I have overlooked.

Many thanks for your understanding

Dr. V

09-01-2010, 09:44 PM


09-02-2010, 02:00 AM
There is one mistake:
in the first of the illustrations he call the red "container3". It is "container1"

I will try to explain it:
The highest of the white divs determines the height of the red div
The height of the red div determines the height of the yellow div
And last the height of the yellow div determines the height of the yellow div

These illustrations show the placement and size of each div throghout the process.

We start with the divs unmodified and therefore placed on top of each other (Ill:1)

Then we move(flows) the yellow div to the green div, 30& to the left, and since the red div is inside the yellow it follows it. (Ill:2)
(and the white follows the red)

Then we move(flows) the red div to the yellow div, another 40% (Ill:3)

Then we move(flows) the white divs to the red div, 70% to the right, so that they are all displayed over the green div (Ill:4)

The blue dotted area (Ill:5) show what is displayed outside (overflows) the green div.

That area will be hidden by "overflow:hidden" (Ill:6)

The white divs have a transparent background, which leads us to the final result (Ill:7)

09-02-2010, 11:16 PM
Lerura, thank you SO much for going to the effort of explaining with those images. I couldn't be sure but it sure as hell looked like there was a mistake. I thought I was going insane!

God bless you! (I don't believe in god, but you get the point). :D:thumbsup:

Kind regards

Dr. V