Question about 100% width on web pages

[Brian]

I wanted to try my hand at a div layout for a web page, and for the most part it was going smoothly.

However, there are a couple divs that I set to 100% width, but the page apparently automatically has some kind of margins or padding. I'm sure this is something common, but I can't figure out how to fix it.

Anyways, no matter whether the div is absolute positioned or fixed, there's always space between it and the border of the page, as seen on an example page here.

I've tried this:

<style type="text/css">
<!--
body { padding: 0px; margin: 0px; }
-->
</style>

But there's still space left over. This is on both local HTML files and any other hosted pages I've tried it on.

I've seen other pages without the padding, but I can't figure out how they do it. Anyone know how to fix this?

[Charles Stover]

The code you pasted should have fixed that.
For good measure, I use:
* { margin : 0; padding : 0; }
for all my pages, then add then manually if needed.

[dude]

Nov 4, 2009 6:01:38 GMT -8 Charles Stover said:

The code you pasted should have fixed that.
For good measure, I use:
* { margin : 0; padding : 0; }
for all my pages, then add then manually if needed.

Probably better to use a proper reset.css as resetting every element just adds extra unnecessary work for the browser. That ought to fix it.

[Jordan]

The division element and the first table are fully extended to the page's width, but the nested table's full width is not equal to its parents because of the first table's default cellspacing value. Just set it to 0 to fix it.

<table width="100%" cellspacing="0">
<tr>
<td align="center" style="background-color: #000; height: 50px;">

[Brian]

Nov 4, 2009 10:10:34 GMT -8 Jordan said:

The division element and the first table are fully extended to the page's width, but the nested table's full width is not equal to its parents because of the first table's default cellspacing value. Just set it to 0 to fix it.

<table width="100%" cellspacing="0">
<tr>
<td align="center" style="background-color: #000; height: 50px;">

Wow, I'm surprised I never thought of that. I'm usually very careful when it comes to the cellspacing and cellpadding values.

Thanks everyone.

[Jordan]

Glad to help.

[Charles Stover]

Nov 4, 2009 7:18:03 GMT -8 dude said:

Nov 4, 2009 6:01:38 GMT -8 Charles Stover said:

The code you pasted should have fixed that.
For good measure, I use:
* { margin : 0; padding : 0; }
for all my pages, then add then manually if needed.

Probably better to use a proper reset.css as resetting every element just adds extra unnecessary work for the browser. That ought to fix it.

I'm not so sure that's true with CSS. Besides the specifics as to how it parses, which I doubt would take longer but can't really prove, the time it would take to download a list of specific elements to set the margin and padding would take longer than it would to parse the margin and padding for all elements.
In short, download time for "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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td" is longer than parse time for "*"
But I wouldn't be surprised in the least if CSS's parsing is equally as fast for both ways, if not faster for * (as it doesn't have to search through as much text).

[jadw2k9]

You would need to add this:

html{
height:100%;
width:100%;
}

body{
position:fixed;
padding:0;
margin:0;
height:100%;
width:100%;
}

#thediv{
position:fixed;
top: ... (depends where you want the div to be)
left:0px;
width:100%;
}

Maybe easier if you look at thi site: www.cssplay.co.uk/layouts/background.html
It is an example of a 100% width/height div although it's used to stretch an image