homepage Welcome to WebmasterWorld Guest from 54.211.47.170
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Help!?
Explicit




msg:1198115
 3:23 am on Apr 15, 2003 (gmt 0)

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




msg:1198116
 4:10 am on Apr 15, 2003 (gmt 0)

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




msg:1198117
 11:10 pm on Apr 15, 2003 (gmt 0)

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

grahamstewart




msg:1198118
 11:50 pm on Apr 15, 2003 (gmt 0)

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;

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved