This is a forum where members new and old can come to ask questions and get info and opinions. It is not a place to advertise your business or have other forms of advertising, whether it be in your posts or signature.

All links in the forum will not be indexed by Search Engines and any unapproved forms of advertising or spam will be dealt with accordingly, deleted, and that member's account banned.

Forums

Overview » CSS » css setting div full page width

css setting div full page width
Martin Forbes Member Since: 04 Dec 2003 Posts: 1	Posted 01 Dec 2006 14:55:41 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. 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.

css setting div full page width

Martin Forbes
Member

Since: 04 Dec 2003
Posts: 1

Posted 01 Dec 2006 14:55:41

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.

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.

Alan C Total freaking Member Since: 04 May 2006 Posts: 473	Replied 01 Dec 2006 23:47:07 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.

Shawn S Member Since: 30 Apr 2008 Posts: 1	Replied 30 Apr 2008 06:43:41 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.