Question

can someone plese clarify how to set width for an html document.
i have set the width for my body tag and even made a wrapper div to set the width but still the page is running a few pixels wide?
what am i doing wrong?

Answer 1

To follow up on what @pekka said:

The body tag has a default margin in all browsers

Browsers have different default styles, and this likely explains the extra margin or padding that you’re seeing. For your css to behave as you expect, it’s generally adviced to reset your css. In short, but defining certain styles across all elements, you eliminate these browser inconsistencies and can then trust that your styles will cascade as you want them too. This is why setting the margin on the HTML and BODY elements eliminates the extra space mentioned in the question.

Eric Meyer has good thoughts on this, and his reset is the one I’ve seen most frequently used across the web. However, it should be noted that the extensive example below shouldn’t be used without though. Tweak it to fit your project’s needs

Ex (From Eric Meyer’s Reset, link below):

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
 }

Check out these discussions for a more detailed explanation:

http://meyerweb.com/eric/tools/css/reset/

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/