Hi,

Can anyone tell me how I can set out my divs so that they are the full page width without the small gap either side please? I have it set so the the top of the div is hard against the top of the browser screen and hard to the left of the browser screen but when I set the width to 100% there is a horizontal scrollbar, but if I set it to 99% there is a small gap.

Any suggestions gratefully received.

There can be problems when viewing in different browsers. I found a really weird problem when I didn't have a width:100%; set on my outermost div in Firefox, then the whole page would jump when I ran my mouse pointer over certain links lower down the page. That width setting stopped it.

I know different browsers have different default margin settings so it could be that. By that I mean that even if you say something like :

html {
margin-right:0;
margin-left:0;
margin-top:0;
}

you may still get actual margins because of the browser defaults, Firefox has a default top margin of 8px, I can't find the reference for that but I know that if I want the page to sit right up against the top of the window then I have to have a top margin of -8px.

Eventaully this is what I ended up with:

div#outerContainer {
width:100%;
background-image: url(/images/image_name.jpg);
background-repeat: no-repeat;
background-position: left top;
float: left;
/* margins to reset the browser default in Firefox and Opera */
margin-top:-8px;
margin-left:-8px;
}

The float and combination of negative margins looks fine in Firefox and Opera, I just checked in IE7 and that looks like it puts a left margin of a couple of pxs plus a top margin of about 4 -
<img src=../images/dmxzone/forum/icon_smile_angry.gif border=0 align=middle>

It just seems that IE is bad news all the time . . . ooops, on my soapbox again.

This is a somewhat older thread, but maybe it'll help someone out there.

The simplest fix I've come up with is to add <pre id=code><font face=courier size=2 id=code>margin-right: 0.01em;</font id=code></pre id=code> to the body element.

Since it's an em, it *should* be affected by the user's text size, but I've tested both min and max text sizes in IE 6-7 and Firefox and text size doesn't seem to affect this.

Adding <pre id=code><font face=courier size=2 id=code>margin-top: 0.01em;</font id=code></pre id=code> to the body element also takes care of vertical gaps and inconsistencies in browsers also.

This works in Firefox 2, IE 6 & 7, Opera 9, and Safari 3 (Win).

Hope this helps somebody out there.