Offset positioning and wrapping text

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
codepoet
Forum Members
Forum Members
Posts: 14
Joined: Sun Sep 24, 2006 10:43 pm

Offset positioning and wrapping text

Post by codepoet »

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.  ;D
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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Offset positioning and wrapping text

Post by Dr.CSS »

Take away overflow:hidden and margin needs to be margin: 0px -40px 0px 0px
take the float out of the content and give it  margin: 5px 0px 5px 26%;

Not sure how this will effect IE but you can save the old style and serve it to IE with this hack...

* html body div.content
{
  background-color: #ffdddd;
  display: block;
  float: left;
  border-right: black thin solid;
  padding-right: 5px;
  border-top: black thin solid;
  padding-left: 5px;
  padding-bottom: 5px;
  margin: 5px 0px 5px 5px;
  border-left: black thin solid;
  padding-top: 5px;
  border-bottom: black thin solid;
}
codepoet
Forum Members
Forum Members
Posts: 14
Joined: Sun Sep 24, 2006 10:43 pm

Re: Offset positioning and wrapping text

Post by codepoet »

Thanks fot that. I have hacked about and pretty much got it working how I want, and in a way that I kinda understand how it is working too (which is always a bonus :) ) 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?  ???
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Offset positioning and wrapping text

Post by Dr.CSS »

You may have to do the same IE hack with this...

* html body div.newscontainer {
display: block;
float: right;
visibility: visible;
margin: 0px;
position: static;
width: 150px;
background-color: silver;
border-left-width: thin;
border-left-color: black;
}
Post Reply

Return to “Layout and Design (CSS & HTML)”