stop overapping

[jakenoble]

I have a new column on the right, i want to stop it going over my main body of text which is on the left, when the screen is re-sized.

Like so:-

.ntitletext {
FONT-SIZE: 12px;
line-height: normal;
COLOR: #0066FF;
font-family: "Courier New", Courier, mono;
position: absolute;
left: 70%;
top: 70px;
width: 100;
font-weight: bold;
text-align: center;
}

Notice, the left 70% here is the most important part. I need to be able to set a minimum left, e.g. the minimum number of px the news column canbe from the left of the screen. But then at the same time have it on 70% (orsomething like) so it stays on the right hand side when the screen size is 1280X1024?

Is there another way of doing this.

JAKE

Thanks in advance.

[Roy Sinclair]

Use "float:right;" instead of "position:absolute", "left:xx" etc.

That way even if the window is squeezed very narrow, this box won't overlap other content.

[jakenoble]

It doesn't work. You mean like this:-

.ntitletext {
FONT-SIZE: 12px;
line-height: normal;
COLOR: #0066FF;
font-family: "Courier New", Courier, mono;
float: right;
width: 100;
font-weight: bold;
text-align: center;
}

It still overlaps.

Any more ideas? Or have i done it wrong?

Probably the latter.

[Roy Sinclair]

To know more, I'd have to see what it overlaps. Perhaps a link or the rest of the code?

[jakenoble]

Thank you

www.jakenoblewebs.co.uk

[Roy Sinclair]

Sorry about taking my time getting back to you on this.

This overlapping doesn't seem to be much of a problem until someone makes a very narrow window. However it's caused by using position:absolute. Using that prevents items from relocating or being pushed around by other elements when the page is resized and in fact it allows things to overlap other items because that's one of it's delibarate properties. If you want things to stay in the page flow you need to avoid using position: absolute. Try position: relative instead.

Also you should clean up the html some more, you have <span class="a"> wrappers around the a tags in that menu box which are not needed all, excepting the one with the hovereffect class instead. None of those are needed, the styles they add can be applied to the a tags directly and it appears you've already done so.

Also get rid of the <tr> and <td> tags from the right hand column, you've already removed the <table> tag. Those items might be better structured as a simple unordered list.