CSS bottom of page div tag cut off
Why is the bottom of my page being cut off in IE6 and what is the best way to fix it?
Hi, this seems to work (for me):
Add a clearing element at the bottom of maincontent -
...stay competitive in today's world market.</p>
<div style="clear:both;"></div>
</div>
<!--end maincontent -->
</div> <!-- end pagecell -->
</body></html>
AND add some padding-bottom to #pagecell -
#pagecell
{ padding-bottom:40px;
/* border-style:dashed; border-width:thin; */
}
Add a clearing element at the bottom of maincontent -
...stay competitive in today's world market.</p>
<div style="clear:both;"></div>
</div>
<!--end maincontent -->
</div> <!-- end pagecell -->
</body></html>
AND add some padding-bottom to #pagecell -
#pagecell
{ padding-bottom:40px;
/* border-style:dashed; border-width:thin; */
}
Ok, I see no clearing div is needed (no floats ;o) an empty div or simply a <br> element at the bottom of maincontent will do - together with the padding...
ASKER
It is probably working for you because your resolution is large enough. make your browser window smaller and you will see it being cut off.
overflow: auto; on main content div didn't help.
Adding the padding-bottom:40px; to the #pagecell div seemed to fix it. I guess I'm just not understanding why it is being cut off in the first place though.
overflow: auto; on main content div didn't help.
Adding the padding-bottom:40px; to the #pagecell div seemed to fix it. I guess I'm just not understanding why it is being cut off in the first place though.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Forget that, I just saw that it would break the top of the page. But here you have the explanation:
You are pushing the relatively positioned #maincontent out of pagecell...
You are pushing the relatively positioned #maincontent out of pagecell...
ASKER
Ah, you're right. I was wondering why in dreamweaver when I clicked design view, my main content went farther than the page cell.
So you can't use the top position tag in a relative div?? Anyway, I got rid of that and a few others I had and changed the navbar from absolute to relative. It looks good now. I'll probably leave the bottom padding in there anyway.
So you can't use the top position tag in a relative div?? Anyway, I got rid of that and a few others I had and changed the navbar from absolute to relative. It looks good now. I'll probably leave the bottom padding in there anyway.
>So you can't use the top position tag in a relative div?
The browsers will behave differently - have a look at this very simple example. FF will let you scroll down to the #down div, IE6 will not show a scrollbar and the div will not be accessible:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#down {
position:relative;
top:2000px;
width:200px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="down">I'm here!</div>
</body>
</html>
>It looks good now.
Looks fine for me too, in IE6, FF2 and Opera 9 ;)
The browsers will behave differently - have a look at this very simple example. FF will let you scroll down to the #down div, IE6 will not show a scrollbar and the div will not be accessible:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#down {
position:relative;
top:2000px;
width:200px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="down">I'm here!</div>
</body>
</html>
>It looks good now.
Looks fine for me too, in IE6, FF2 and Opera 9 ;)
ASKER
Thanks for the help!
As per the request at https://www.experts-exchange.com/questions/24486556/Automated-Request-for-Attention-Q-22602668.html, I have removed the URL from the question text.
quomodo
Community Support Moderator
quomodo
Community Support Moderator
overflow: auto;
as a rule for the maincontent div