I wanted to be able to pretty-up a web-site article with small islands of colored text or image around which the article text would flow. That is easy enough in standard HTML, providing you are happy to stay inside your container. But I also wanted to make these inserts into overhangs that hang over the edge of the containing DIV, for example, to catch the eye.Then I read about the wicked things you can do if you
float: left
margin:0.5em 1em 0.5em -7em
padding:0.5em
width:13em
float: right
margin:0.5em -7em 0.5em 1em
padding:0.5em
width:13em
float with negative margins. The idea is that you use a negative margin to push the text-box out over the edge of its container; use float left and negative left margin to overhang on the left etc.
If you have Netscape6 or Opera5 you can see this very nicely done on the left and right. The effect is nicer without the border lines, but they are useful to show what is going on. If on the other hand you have MSIE5x, you can see why I was disappointed. Explorer cuts off the text/image at the border of the container.
Well, err, no, actually, it doesn't. See below...
...It works just fine. Henry Olders kindly sent me some screen shots from a MAC MSIE where the cute cool scheme elaborated below didnt work. This prompted another look. And to my dismay/delight/bamboozlement, I found that the above works just fine if you do not use auto margins to center the container. In the few pages where I wanted to do this stuff, I can live with balanced margins.
In point of fact, I had recently been thinking of dropping the scheme anyway because it does not degrade gracefully. In the absence of CSS, the text which is treated in a spanned block, is just left littering the text it was supposed to accompany. So I have removed it from the Maths Induction page.
But I couldnt just throw it all away. So I have kept the remainder of this page because it shows what you can do with float, position and negative margins....
I returned to tinkering with an earlier idea, float:left;
width:13em;using float followed by a relative re-positioning to achieve a similar effect. See at left, which gets us most of the way. But because the main text is flowed around the text box after floating but float:left
position:relative; left:-7em
width:13embefore repositioning we are left with a big blank space. However, as shown in the next left overhang, a negative right margin can be used to drag the main text under before repositioning.
Notice that in the original scheme at top, for left overhangs, a negative LEFT margin was used to move the
float: left;
position:relative; left:-7em;
margin:0.5em -6em 0.5em 0;
padding:0.5em;
width:13em;
float: right;
position:relative; left: 7em;
margin:0.5em 0 0.5em -6em;
padding:0.5em;
width:13em;
text box over the edge. In the present scheme, that function is performed by the relative repositioning, and a negative RIGHT margin is used to clean up the white space left behind.The left shift is about half the overhang width, and the margin is a touch smaller than the shift; this provides padding between overhang and main text. I have also added small margins top and bottom of each overhang to improve spacing on the page.