“Floats are removed from the flow”
Just remember that for now and say it to yourself a few times and repeat it to anyone who asks you 
The ul menu above #maincontent is floated therefore #maincontent’s containing block will be the previous static html element above it. Therefore #maincontents top border would actually be in the same place as the top of the floated menu. Backgrounds of non floated elements slide under floated elements until they reach their containing block.
#maincontents containing block would be exactly the same as if the ul menu float was not there.
What happens when you float an element is that it is removed from the flow but with the caveat that foreground content is repelled away from the float. So although the text content may be at the side of a float or wrap under a float the elements background actually slides all the way under the float until it reaches the containing block (see my link to the containing block above).
and #column1 (when unfloated) appears top left of #maincontent.
If you un-float (is that a real word?) column1 it moves to the far left edge only because you have set the width to 20%. You can see that the blue background still slides under the floated menu above it as already mentioned, but the foreground content is repelled downwards. If you increase the width of this now un-floated column1 to say 100% then you will see that the h1 headings now have room to align to the right edge of the floated menu (<h1>S</h1>).
For the content to wrap around the float it must be wide enough to reach the end of the floated element otherwise it can’t wrap because of the simple mathematics of the situation.
No (in simplistic terms) if i shift (move?) #column1 left from where it already is (by floating) it immediately “touches the padding edge of the containing block” and so stops there (albeit on top of the floated uls)? Apparently not?
If you float column1 it does exactly as it should do and floats next to the floated menu and sits on the right side of the menu as expected. If you floated another element left it would then align to the right side of column1.
This is what floats do. They will float horizontally left/right from the position they find themselves at until they hit something. After all this is how most menus are constructed with a series of floated list elements aligned horizontally across the top. It would be no good if each list started on the next line down.
May be I need to get straight what means containing, what ecompasing etc…
What we mean by encompassing is when you want the background of a parent to encompass it’s floated child.
Perhaps it’s easier to explain with an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.parent {
background:red;
}
.child {
float:left;
width:200px;
height:300px;
background:yellow
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Float</div>
<p>Non floated content that only has a red background as long as real content is present</p>
</div>
</body>
</html>
In the above example the red background only encompasses the non floated text.
However if we clear the float as in this example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.parent {
background:red;
}
.child {
float:left;
width:200px;
height:300px;
background:yellow
}
</style>
</head>
<body>
<div class="parent">
<div class="child">Float</div>
<p>Non floated content that only has a red background as long as real content is present</p>
<div style="clear:both"></div>
</div>
</body>
</html>
We have regained control of the flow of the document and the red background now encompasses the float because we have placed an element after the float but within the parent forcing the parent to take notice.
I will get there, it’s probably the way my mind works, but I think as a learner you have a double problem that by accidentally doing something unconventionally you open up a need to understand what happened in greater detail than if you’d already done something the intended way.
Thanks again.
Yes that’s quite true
