Take the 2-minute tour ×

I'm trying to design a webpage using tableless layout; however, i'm experiencing problems when it comes to height of the page. I used jquery accordion to minimize the use of scroll bars in the page. However, im experiencing an overlapping of the div's when i collapse the accordion. The accordion part overlaps the bottom edge of the page and overlaps the footer too. How can i automatically adjust the height of the page without overlapping the other div's in the page.

as if you can the attached image is the basic layout that i made. the content part of the page will be dynamically populated; so i need to automatically adjust the contents div's using css

Thanks! Nhoytialt text

here's the html code i made; can you please help me out to correct it?

<title>Untitled Document</title>
<style type="text/css">
html, body

    border:solid 1px #000;

    border:solid 1px red;

    border:solid 1px cyan;

    border:solid 1px blue;

    border:solid 1px green;

<div id="pageholder">

<div id="navigation">navigation</div>
<div id="contents">contents</div>

share|improve this question
add comment

2 Answers

up vote 0 down vote accepted

If you have any CSS rules in there to float you will want to remember to clear:both after the div's in question. That should stop the overlapping (if you are using float and did not clear it). You can do something link:

<br style="clear:both">
share|improve this answer
add comment

There are a few things to keep in mind when you're dealing with page height:

First of all, by default, content will usually be shown if it extends past the given height of its container, so to properly enforce you scrolling, you should have overflow-y:scroll on the #navigation and #content divs.

Second, you're setting quite a bit of height. The header is 120px tall, plus the nav at 720 + 10 margin (5 top, 5 bottom), before the footer that adds another 50. That's 900 total, which is a LOT. A common resolution right now is 1280x1024, but you have to keep in mind that the browser eats a lot of height; probably in the area of 200px. It's possible that you're assigning too much height to your page.

Third, assigning a massive negative margin-top on your #contents div is a little strange. A negative value for margin-top moves the element up the page, so what you're telling the browser to do is move #contents up 724px, which should put it more than halfway off the top of the screen. Is that what you were intending to do?

Finally, it's not usually necessary to specify heights on containers. By default, with no height style at all, the browser is smart enough to make your containers that right size and not overlap them. It's possible that all you need to do is remove the height and negative margin-top styles on #contents and #navigation to fix your issue, unless you really need your nav or content to be exactly that height.

share|improve this answer
add comment

Your Answer


