Help!?

[Explicit]

Okay, since my last problem was fixed by a simple thing I'm thinking this one might as well.
I have this problem, on this page here:
<snip>
The text goes out past the edge of the right side of where I thought the divs edge was , I have a 35px padding on the left side, I have added a red border on the right to show you where the edge of the div is, I thought it was supposed to be in line with the black border on the images above...

How can I make the edge of the div inline with the black border on the images above and have 5px of padding from it?

I already tried adding padding to the right side, it just seems to shift the whole page over?

[edited by: Woz at 3:40 am (utc) on April 15, 2003]
[edit reason] no URLs please. [/edit]

[grahamstewart]

Can't see your page (cos your not allowed URLs here) but I am guessing that you have set the width of the div?

Well the 'width' property actually specifies the width of the content. The true width of the entire div will be..

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right'

Hope that helps

[Explicit]

I changed the design some, now it's fine... Thanx any ways.

[grahamstewart]

It sounds like you have set the width of the div wrongly.

Use the formula I gave you to work out its proper size.
For instance..

<img "yourpic.gif" width="200" height="10">
<div id="#yourdiv">
hello
</div>

to get the right border of 'yourdiv' to appear in line with the right border of the image, and with a 35px left margin, you could use this..

#yourdiv {
margin: 5px 0 0 35px;
padding: 5px;
border: 1px solid red;
width: 153px;
}

Why 153px?

Becuase you want the left border to appear at 200pixels.
So you need..

35 + 1 + 5 + width + 5 + 1 = 200;