I am having problems with my <div> layers overlapping when the user resizes their browsers. For example, when the user makes their browser smaller, the <div> layers overlap. Instead I want the scroll bars to show up? Any idea how i can achieve this?
yea...I am using it. The thing is, if you goto napkinz.com (thats the site that I am working on) and make the browser smaller, the right div lay goes under the main div layer...how do I stop that, since they are two separate div layers?
The offset properties top and right are here measured with respect to the containing block. Since none of its ancestors are positioned its containing block is the initial containing block. Therefore it is following the viewport as you resize the window.
(1)
You will need to set e.g.:
Code:
#container {
position: relative;
}
(2)
Your min-width of 950px does not suffice to prevent overlap.
(3)
Are you aware that your page is rendered in quirks mode because you have no doctype declaration. This may cause you head ache in the future. If you don't know the difference between quirks mode and standards mode here is a place to start: Quirks mode and strict mode
ok...so i setup the #container, but there is still a problem, and now there is a huge gap between my #main and #right divs.
I realize I don't have a doctype declaration, but every time I include one, the seachboxes on the #right div start acting weird. What happens is that the submit button image and the input box dont follow the css attributes i put on them, and they become disproportional.
ok...so i setup the #container, but there is still a problem, and now there is a huge gap between my #main and #right divs.
I realize I don't have a doctype declaration, but every time I include one, the seachboxes on the #right div start acting weird. What happens is that the submit button image and the input box dont follow the css attributes i put on them, and they become disproportional.
In IE quirks mode you cannot set an explicit width for the body element. It will be ignored. This is not the case in Firefox's quirks mode.
I strongly recommend that you don't work in quirks mode. I do not know about the problems that you were seeing after adding the doctype declaration, but probably it's your code that is the problem.
Here is my advice. (1)
Put in this:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
(2)
Make changes to your CSS and HTML so that it looks as close to what you want in Firefox. Worry about IE afterwards. (3)
Fix errors so that your HTML and CSS validate.
After doing this, or if you have trouble with the above, repost. Then some of us may take a look at it.
I was able to stop <div> layers from overlapping but now I am having the following problems:
If you open napkinz.com in IE (i did it in IE 7, I don't have IE 6, but if someone does, I would like to know what happens). But if you open it and then click the horizontal bar, IE says there is an error. I am totally confused?
Also if you open napkinz.com in Firefox, and use the horizontal scroll to scroll all the way to right, you will notice there is a lot of empty space. How would I go about making that disappear?
The page works in Firefox and Netscape with one glich, the bottom scroll bars don't work. In IE and Opera the #right <div> is again overlapping others. I don't know how it is working with Safari because I don't own a Mac. The reason for the big empty space was that the "pop-up" (which I have deleted) was an invisible div with a width that was huge. And therefore the browser resized to that causing a huge gap between my #right div and my left end of the browser.
The page works in Firefox and Netscape with one glich, the bottom scroll bars don't work.
You have this:
Code:
html{
min-width:1030px;
}
It appears that Firefox 2 may forget to provide the default horizontal scrollbar when one specifies an explicit width or min-width for the html element.
I checked with the Gran Paradiso Alpha 4 (Firefox 3) where the issue fortunately seems to be fixed.
Your solution must be to instead apply the min-width to the body element. This would also be the usual approach.
Yea, I tried that, and that is now what is up on the site, but now every browser lets the right div overlap the main....I am back where I started .....
This is soo frustrating....
But thanks for the help and any more would be really helpful....
Yea, I tried that, and that is now what is up on the site, but now every browser lets the right div overlap the main....I am back where I started
You have absolutely positioned your #right sidebar. But it has no positioned ancestor!
The positioning context for an absolutely positioned elements is its containing block. It is explained in CSS 2.1 Working Draft, section 10.1 how such a containing block is established. In particular, when an absolutely positioned element has no positioned ancestor the containing block defaults to the initial containing block.
Although it seems to be unclear from the specs what the 'initial containing block' is, browsers will usually take the html element.
Your solution is to establish the body element as the containing block for #right:
Like if you would go to napkinz.com right now, you would notice that the right div is not aligned right. It has "fallen down" and needs to be moved up a bit/a lot.
The major problem has been solved but there are really small glitches that I would love to resolve... Now there are some problems with different browsers:
IE7 (someone with IE6 tell me what is going on) - The right div starts by overlapping the main, but as soon as you resize the window it fixes itself? Very weird.
Netscape and Firefox - The right div is a bit to down, needs to be moved up a bit... It fixes itself when I remove the top:10px; from the right div...but then IE and Opera don't work right.
Opera - working beautifully...
Anyone with Safari...let me know what is going on.
Any ideas on how to fix this? I know I could use the "<!--[if IE]>" statements but I am trying to avoid that.
Netscape and Firefox - The right div is a bit to down, needs to be moved up a bit... It fixes itself when I remove the top:10px; from the right div...but then IE and Opera don't work right.
I know of this issue, but not sure how to understand it. It has in part to do with margin collapsing and in part do with the effect of this in presence of floated elements.
The following code shows that Firefox 2, Opera 9 and IE6/7 display in three different ways. I'm not sure about which browser is rendering the page correctly or if the differences are due to lacking precision in the CSS specs. Maybe someone else can tell us. Or maybe someone knows of a source describing the problem.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Margin collapsing in presence of a float</title>
<style type="text/css">
#hello {
border: 5px solid green;
background: black;
color: white;
}
#container {
background: yellow;
color: black;
}
#left {
float: left;
width: 200px;
height: 300px;
border: 5px solid red;
}
#purple {
border: 5px solid blue;
margin-top: 50px;
}
</style>
</head>
<body>
<div id="hello">The div is followed by the yellow div.<br>The yellow div has no padding/border/margin and contains 2 elements:<br>1. A left float (red border).<br>2. A non-floated div with a top margin of 50px (blue border).<br><br>IE6 and 7 doesn't honor margin collapsing. Firefox 2 and Opera 9 do. But Opera 9 lets the float drift upwards outside its container?
</div>
<div id="container">
<div id="left"></div>
<div id="purple">Which browser is displaying this page correctly? IE, Firefox, or Opera?</div>
</div>
</body>
</html>
In your case, the solution is to remove the top margin from #header. Instead apply some top padding to #contain.
Before you post, read our: 
kinda solved
.....
