Offset positioning and wrapping text
Posted: Mon Sep 25, 2006 9:14 pm
I have been trying to lay out a template and have hit a bit of a snag with using CSS to layout my page. I am hoping you folks will be able to help. 
The efect I am trying to achieve is to have a box in the top right corner of my man content box. However I want to offset it a little to the right, so it sort of hangs off the edge of the page. I can do this using position:relative; but the trouble is that the text in the main content box wraps around where the box should be before it was offset. I have managed to get around this in IE6.0 by containing the "hanging" box in a smaller div that the text flows around, and then fidling around with the clipping to get the larger box to hang off the edge of the page. This pretty much works and so you can see what I have been trying to achieve by pointing IE6.0 at http://www.allsaintsbotley.org.uk/cmsmadesimple. I have made the "hanging" box transparent and the contaning box colored so you can see what is going on.
However the problems start when I use firefox - the clipping actually does what it says on the tin
Perhaps I am goijg about this all wrong, and I would be grateful if you could suggest a better approach, or tell me what I have not quite got right about the approach I am taking.
The efect I am trying to achieve is to have a box in the top right corner of my man content box. However I want to offset it a little to the right, so it sort of hangs off the edge of the page. I can do this using position:relative; but the trouble is that the text in the main content box wraps around where the box should be before it was offset. I have managed to get around this in IE6.0 by containing the "hanging" box in a smaller div that the text flows around, and then fidling around with the clipping to get the larger box to hang off the edge of the page. This pretty much works and so you can see what I have been trying to achieve by pointing IE6.0 at http://www.allsaintsbotley.org.uk/cmsmadesimple. I have made the "hanging" box transparent and the contaning box colored so you can see what is going on.
However the problems start when I use firefox - the clipping actually does what it says on the tin
Perhaps I am goijg about this all wrong, and I would be grateful if you could suggest a better approach, or tell me what I have not quite got right about the approach I am taking.
) However I still have a problem, that does not make any sense - that a look, in IE then "news" box is offset further to the right that in firefox. Infact in IE is seems to be pulled to the right twice the distance that I set in the right margin for the newscontainer div. Can anyone explain this to me? 