Forum Moderators: not2easy
Second, try adding
*{margin:0;padding:0;border:0} to your CSS, if you haven't already.
Also, make sure you test the situation in the simplest way. Make a new html file and just make a div in the body, and size it to 100% width, and see if it works.
Ensure you're using a good doctype. Right now,
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
is a pretty good choice, but you could use strict mode too.
so I made a simple test file, and it worked perfectly. I even removed body:100%, and it worked perfectly. Running on IE 6 and FF 2.
If for some reason content (image, or something) is too wide, it will still horizontally scroll. and if you dont' want that, then add divid{overflow:none} I think.
[edited by: Xapti at 7:07 pm (utc) on Mar. 31, 2007]
Try scrolling to the right after you resize the browser to be smaller than the content div.
<html>
<head>
<style>
body {
width: 100%;
}
.banner {
width: 100%;
background-color: #999;
}
.content {
width: 950px;
border: 1px solid #333;
height: 100px;
}
</style>
</head>
<body>
<div class="banner">
this is the banner
</div>
<div class="content">
this is the content
</div>
</body>
</html>
Xapti, it's 'overflow: hidden'
norbiu I copied this example with a strict doctype and I think I know what's happening.
Your banner is 100%, when you shrink the browser this also shrinks with the browser.
Your content is 950px, so when you shrink the browser this scrolls off the screen.
From my point of view, the 'huge gap' you are seeing is because the banner is now smaller than the content div, so a gap appears to the right of the banner.
The 100% is referring to the browser width, not the content width.
Is that it?
Instead of having width: 100% in .banner I put a max-width: 1500px; (or higher) and min-width: 950px; (equal to the content width).
Edit: There still is a gap when I scroll, but it's not as big (just a couple of pixels)
The only way you can get around this is by 'overflow-y: hidden' but then your page can't scroll downwards, unless you use a wrapper and have one scrollbar on body, one on the wrapper but it really starts to get messy that way.
