CSS bottom of page div tag cut off

Kurt4949
Kurt4949 used Ask the Experts™
on
Why is the bottom of my page being cut off in IE6 and what is the best way to fix it?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
try:

overflow: auto;

as a rule for the maincontent div
Top Expert 2007

Commented:
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; */
}
Top Expert 2007

Commented:
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...
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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.

Top Expert 2007
Commented:

Ok, I think I found the real problem. Just delete the top value for #maincontent and it should be ok:


#mainContent
      {      position:relative;            
            left:235px;
            top:65px;        /* <------------------------------------------  delete this */
            width:630px;
            font-family: Arial, Helvetica, sans-serif;
            font-size:10pt;
            /* border-style:dashed; border-width:thin; */
      }
Top Expert 2007

Commented:
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...

Author

Commented:
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.
Top Expert 2007

Commented:
>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  ;)

Author

Commented:
Thanks for the help!

Commented:
As per the request at http://www.experts-exchange.com/Q_24486556.html, I have removed the URL from the question text.

quomodo
Community Support Moderator

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial