Faux Column Tutorial Raises A Question

HTML & CSS
1

Buongiorno from 1 gegrees C occasionally snowing Wetherby UK :slight_smile:

Ive followed this excellent tutorial http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks and produced this:
http://tutorial.davidclick.com/column-colors.html

But Ive got a question specifically to do with why container 1 sits on top of containers 2 & 3 thus showing its red color infront of the other divs before any position:relative; right:40%; bits are applied

The exact bit in the tutorial i’m referring to is illustrated here:

http://i216.photobucket.com/albums/cc53/zymurgy_bucket/container-order_zps9fc94c2a.jpg.

I wonder is the reason container 1 sits on top is related to z index. I’m a bit confused how the colors reveal themselves :frowning:

Any insights welcome :slight_smile:
Grazie tanto,
David

2

Look at the way the HTML div’s are nested. Container one is nested inside container two, which is nested inside container three. From what I see from this example of triangles, the “z-index” property will change the stack level.

3

Hi,

To envisage what’s going on here imagine you have three playing cards stacked on top of each other. Now slide each playing card slightly to the left to reveal a strip of each card at the side. This strip at the side is just the card underneath being revealed. By sliding the cards you can see a bit of each card.

The layout technique just follows that process. You have 3 nested containers but at first all you would see would be the inner container as its background would cover the other two parent’s background. Therefore you slide the two inner containers to the left thus revealing the edges of the inner containers just like you would with the cards I mentioned. The further you slide the cards the more of the background is revealed.

However all your content is still inside the inner container which is shifted to the left now. All that’s needed is to nest another 3 inner floated containers and drag each one back to the right over the edges of the now revealed background colours. So taking the card analogy imagine the top card has 3 pennies stacked on top of it. You have moved the cards initially to the left and then you now take each penny and move it onto the edge of each card.

Here is a simpler html structure so you can visualise what’s going on.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.col1,.col2,.col3{
	border:1px solid #000;
	background:red;
	width:300px;
	height:300px;
	margin:auto;
}
.col2{background:green;margin:10px 0 0 -100px;}
.col3{background:blue;margin:10px 0 0 -100px;}
.content1,.content2,.content3{
	width:100px;
	position:relative;
	float:left;	
}
.content2,.content3{left:210px}
</style>
</head>

<body>
<div class="col1">
<div class="col2">
<div class="col3">
<p class="content1">Content 1</p>
<p class="content2">Content 2</p>
<p class="content3">Content 3</p>
</div>
</div>
</div>
</body>
</html>

All the position:relative does is to move the element somewhere else without disrupting the flow. There is no real need for a z-index as the levels will be right form the start.

It’s an old technique and similar to my original demos from 2002. These days you can use display:table for ie8+ and not worry about such hacks unless you need full ie7 support.