The thing I really like about position, is that the two sections will STAY where you put them. I find that to be unlike float which is fundamentally slippery (that's why you use it, for that liquidity, no property is so "smart" in terms of sensing where it is, and moving to what it considers to be the best possible location (whether you think so is another matter
but when used correctly float can do things nothing else can do. It's a killer tool to have in your toolbox.)
Absolute positioning is fine for small chunks of the page that need to be removed from the page flow intentionally but it is a bad way to set up your main divisions.
I never really considered floats to be slippery as you described them, I find them to be more like magnets. They stick hard and fast to the left or the right and then you fine tune them with margins. The other advantage is that text will flow around them when needed.
On your example you needed to set the main wrapping div as the containing block for the AP right column. Now here is the problem with it being removed from the flow, the main wrapping div does not see it there and it will not expand when the right column is greater. A background color on the #contentWrapper shows it stopping with the left column and the right column hanging out. That would not work in a page that depends on the parent to expand.
Code:
#contentWrapper {
background:#CDF;
position:relative; /*establish containing block*/
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 1em 1em;
}
#contentWrapper {
background:#CDF;
position:relative;
}
div {
border: solid red 2px;
}
#main div,
#secondaryContent div {
border-color: blue;
}
#main,
#secondaryContent {
width: 47%;
border-color: cyan;
}
#secondaryContent {
position: absolute;
top: 0;
right: 0;
}
/*
#contentWrapper {
position: relative;
}
*/
</style>
<title>Earth Chronicle Home</title>
</head>
<body id="default">
<div id="contentWrapper">
<div id="main">
<h2>Main Content</h2>
<div>
Main content for the first row
</div>
<div>
Main content for the second row
</div>
<div>
Main content for the third row
</div>
</div>
<div id="secondaryContent">
<h2>Secondary Content</h2>
<div>
Secondary content for the first row
</div>
<div>
Secondary content for the second row
</div>
<div>
Secondary content for the third row
</div>
<div>
Secondary content for the fourth row
</div>
<div>
Secondary content for the fifth row
</div>
<div>
Secondary content for the sixth row
</div>
</div>
</div>
</body>
</html>
Originally Posted by Rayzur
No, it's not your fault. I set this up to demonstrate positioning context because that was the thing Andy Clarke explained so well in Trascending CSS. I did NOT get positioning before reading that book, and it wasn't until he went step by step like this, that I got it. So yes, the example explicitly doesn't work and you have to uncomment the style rule to reset the positioning context... and hopefully get your "positioning epiphany". 
I have never seen anyone get decent behavior out of 50% widths before. Maybe I have on sites that I haven't investigated the CSS, but your negative margin with 50% technique was a new one for me. What are the strengths and weaknesses compare to using a reduced percentage?
Bookmarks