SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 26
Thread: basic width question
-
Aug 29, 2007, 08:52 #1
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
basic width question
Hi
THe width of my container is set to 420px. However in dreamweaver when I highlight it it shows as width as: "420px (430px)". And it takes up 430PX and not 420px.
Can anyone explain where does this extra 10px comes from and my width is showing as 430 and not 420?
Regards
Explorer
-
Aug 29, 2007, 08:57 #2
- Join Date
- Apr 2003
- Location
- Leeds, England
- Posts
- 234
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you have any padding set, this will increase the width.
-
Aug 29, 2007, 09:00 #3
- Join Date
- May 2007
- Location
- Portsmouth, UK
- Posts
- 775
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
padding possibly?
-
Aug 29, 2007, 09:01 #4
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Have you applied padding, margin or border to the container?
The total width of the box is made up from the width, margin, padding and border so if you've applied padding of 5px for example then it'll add 5px to the left of the box, 5px to the right plus the width.
I don't use Dreamweaver but I presume it's doing something clever and telling you the width you've applied plus the total width for the box model.
-
Aug 29, 2007, 09:45 #5
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi
I have no padding, margin on the body or on the container, however I think i see where the extra 10PX comes from - I have had to set the body to the following which gives a defailt margin on the left to 10PX (but also increases the margin on the right so it should cancel out):
margin: 0;
padding: 0;
margin-left:auto;
margin-right:auto;
If put margin-left:0 I lose the extra ten PX on the body but my page is no longer displayed in the center in FIREFOX, which seems to override the <center> tag but this does not happen in IE. .
But the first container still gives the same reading of 420px which is expected along with the 430px inside brackets, this should nto be there.
-
Aug 29, 2007, 15:29 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
First off you shouldn't be using deprecated (obsolete) markup in your Web pages. There's a reason why it's being removed from the specification, and that's because those elements are presentational in nature, while HTML is a structural markup language.
Is this the same page/site you're having difficulty with as the other thread where the footer was having problems by any chance?Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 29, 2007, 15:35 #7
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi
Yes it is the same page the problem with the footer also.
But you have not said which elements are deprecated but I assume you are referring to the <center> tag? Should I remove that, but then I think my IE does not display the page in the center.
Regards
-
Aug 29, 2007, 15:39 #8
- Join Date
- May 2007
- Location
- Portsmouth, UK
- Posts
- 775
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you have margin set to 0 which will override the margin left and right
-
Aug 29, 2007, 16:11 #9
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, <center> is deprecated. A general rule of thumb is that if it's a presentational element or attribute, there's a very good chance that it's been rendered obsolete (some noted exceptions are align="" when used inside table elements, <small></small> and if I recall correctly, <sup></sup> and <sub></sub>).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 29, 2007, 16:12 #10
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
csswiz, I wouldn't say margin adds to the total width of an element - I find it a little confusing, margins can overlap it's best to think of an elements width as the total visible width.
width + padding + border = total visible width
You need to post a link to the page in question or show your entire code please.
james_littler, explorer07 set the 'margin' first so the 0 will be overridden correctly with the auto values.
But, you don't want to set margin: 0 auto; on the body
I recommend you start your css with
Code:* { margin: 0; padding: 0; }
-
Aug 29, 2007, 16:54 #11
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
HI
Yes Dan I sort of gathered that, Firefox was ok but not IE. The problem was fixed with the following hack : text-align:center; in the body tag.
Mark as for the margins I have removed the margin:0, padding:0, replaced it with the following as per the reccomendation:
html,body {margin:0;padding:0}
Whilst on this subject do you know why this one start with html as I thought in CSS it would always start with a tag like body{} or p{} etc.
Regards
-
Aug 29, 2007, 17:15 #12
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If that was in IE 6, I suspect you don't have a complete and proper DOCTYPE. Not having one will throw IE 6 into quirks mode, meaning it'll act the exact same way as IE 5.
As for your other question...
http://www.sitepoint.com/forums/show...25#post3528425Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 29, 2007, 17:37 #13
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
HI dan
This is my Doc Type (default on Dreamweaver)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
Should I add anything?
Regards
-
Aug 29, 2007, 17:47 #14
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>Web Page Title</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="imagetoolbar" content="no"> <meta name="description" content="The Current Web Page's Description Goes Here."> <meta name="keywords" content="current, page's, keywords, go, here, only, once, page, content, has, been, finished"> </head> <body> </body> </html>
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 30, 2007, 01:25 #15
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I don't really agree or maybe it's because I'm displaying an element differently so we're thinking of different things but take the following code.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Side by Side boxes</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 10px; font-family: arial, verdana, helvetica, sans-serif; font-size: 77%; width: 540px; margin: 0 auto; } #container { float: left; width: 540px; background-color: #000; } #column1 { float: left; background-color: #CCC; width: 250px; margin: 10px; } #column2 { float: left; background-color: #C00; width: 250px; margin: 10px; } </style> </head> <body> <div id="container"> <div id="column1"> <p>text</p> </div> <div id="column2"> <p>text</p> </div> </div> </body> </html>
From what you're saying, we could bring the width of the container down and these two columns would still fit side by side?
However, dropping the 540px down by just one pixel to 539px forces the second column to drop because there's no longer enough space for it.
Have you got an example to show what you mean as I've always considered the margin, padding, border and width to be what makes up the structure of the box model (along with content, background-image and background-colour).
Maybe you're using negative margin's though? In which case they're still part of the box model but would be subtracted from the width wouldn't they?Last edited by DaveWoods; Aug 30, 2007 at 02:59.
-
Aug 30, 2007, 01:27 #16
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nobody's mentioned it yet so try using http://validator.w3.org to ensure that you're writing valid code. It'll tell you if you're using any deprecated code along with any other mistakes
-
Aug 30, 2007, 02:58 #17
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi CSSWIZ
Please clarify the following: body {
padding: 10px;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 77%;
width: 500px; margin: 0 auto;
}
#container {
float: left;
width: 540px;
background-color: #000;
I dont understand how the container width of 540 can exceed the width of the body which is 500, because I thought the container is inside the body. So a larger container width inside a smaller body width seems strange.
Of courrse I understand how you arrived at 540 as two coloumns (250+250+ 20+ 20) and the paddings.
Regards
-
Aug 30, 2007, 03:01 #18
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
well spotted, mistake on my part as that should also be 540px and has now been corrected
i start off with the widths, apply the paddings, margin's and borders and then adjust the width's accordingly, I'd obviously missed the width on the body when readjusting these.
sorry for the confusion
-
Aug 30, 2007, 03:05 #19
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just on ur point about visible width = width + margin + padding - I agree on this.
But under IE, I seem to lose a bit more pixels for some reason. But Mozilla is fine or a lot better. THe first coloumn shown in my dreamweaver is about 10 pixels longer for some reason. I cant understand this.
I know as Dan said I will have to put my code here, I will a bit later after I clean it up a bit.
Regards
-
Aug 30, 2007, 03:27 #20
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you don't have a complete doctype then it will put IE6 and 7 in quirks mode which means they'll render the same as IE5.x which uses a broken box model.
Dan gave me some advice yesterday about the box model hack which I used to put together the following article to explain the box model and the easiest approaches in getting around this issue
http://www.dave-woods.co.uk/?p=85
Always make sure that you have the full doctype though (as Dan mentioned early) otherwise you'll cause even more problems
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-
Aug 30, 2007, 04:27 #21
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Off Topic:
Dave, you might want to get to your blog and approve the little gift I just left for you there.
And please, in the future please try to limit the use of links to your site - I'm not sure the Advisors would take too kindly to it, even though some of them do it themselves.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Aug 30, 2007, 04:36 #22
- Join Date
- Aug 2007
- Posts
- 88
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi Dave:
When I insert the line that you specified above my headers vanish.
So I inserted it in the following way:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "http://www.w3.org/TR/html4/loose.dtd">
That seems to retain everything.
IS this correct?
Regards
-
Aug 30, 2007, 04:48 #23
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Off Topic:
Sorry, there's obviously a fine line between what's classed as useful and what's classed as self promotion so I'll try and limit it in future.
-
Aug 30, 2007, 04:50 #24
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nope, that's an invalid doctype and will put your site into quirks mode for IE6 and 7. Use the one above and then run your code through http://validator.w3.org as I suspect there's something else wrong with your code.
Alternatively paste your code or provide a link on here and I'll take a look as unfortunately it's your code that's causing the problems and not the doctype
-
Aug 30, 2007, 06:53 #25
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Just on ur point about visible width = width + margin + padding - I agree on this.
And he's saying width = width + margin + padding + border
I've always heard the total width of an element as the visible part - the margin is just space around the outside of the element. I find it easier to understand thinking of the box model in that way.
A moot point?
Bookmarks