basic width question

**explorer07** · Aug 29, 2007, 08:52

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

**hitmanuk2k** · Aug 29, 2007, 08:57

If you have any padding set, this will increase the width.

**james_littler** · Aug 29, 2007, 09:00

padding possibly?

**DaveWoods** · Aug 29, 2007, 09:01

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.

**explorer07** · Aug 29, 2007, 09:45

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.

**Dan Schulz** · Aug 29, 2007, 15:29

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?

**explorer07** · Aug 29, 2007, 15:35

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

**james_littler** · Aug 29, 2007, 15:39

you have margin set to 0 which will override the margin left and right

**Dan Schulz** · Aug 29, 2007, 16:11

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, and if I recall correctly, and ).

**markbrown4** · Aug 29, 2007, 16:12

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; }

which will get rid of all default margin and padding.

**explorer07** · Aug 29, 2007, 16:54

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

**Dan Schulz** · Aug 29, 2007, 17:15

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#post3528425

**explorer07** · Aug 29, 2007, 17:37

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

**Dan Schulz** · Aug 29, 2007, 17:47

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>

**DaveWoods** · Aug 30, 2007, 01:25

Originally Posted by markbrown4

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

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&#37;;
	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>

The columns themselves are 250px each but with 10px of margin either side.

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?

**DaveWoods** · Aug 30, 2007, 01:27

Originally Posted by explorer07

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

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

**explorer07** · Aug 30, 2007, 02:58

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

**DaveWoods** · Aug 30, 2007, 03:01

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

**explorer07** · Aug 30, 2007, 03:05

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

**DaveWoods** · Aug 30, 2007, 03:27

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">

**Dan Schulz** · Aug 30, 2007, 04:27

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.

**explorer07** · Aug 30, 2007, 04:36

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

**DaveWoods** · Aug 30, 2007, 04:48

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.

**DaveWoods** · Aug 30, 2007, 04:50

Originally Posted by explorer07

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

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

**markbrown4** · Aug 30, 2007, 06:53

Just on ur point about visible width = width + margin + padding - I agree on this.

Margin isn't visible

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?

The SitePoint Forums have moved.

User Tag List

Thread: basic width question

Thread Tools

Display

basic width question

Bookmarks

Bookmarks

Posting Permissions