maincontent{

So the #pagewidth div is supposed to form a kind of frame around the #maincontent div. As you can see, I've tried using min-height: 100%, height: 100%, but #pagewidth does not stretch when the content exceeds the capacity of the browser window - it pretty much stops where the window stops.

(I also tried just doing "min-height: 100%; height: auto;" in the #pagewidth div instead of in "html>body #pagewidth". Neither works.)

Sorry then I must be confused as to what your after. Still am a bit. Are you just trying to get your main div to always be 100% high?

Hueij
—
2011-05-07T21:59:20Z —
#7

If you can show us what it is supposed to look like then it will be easier to help. From your code I gather that there will be a header above #maincontent but I'm not sure.

Oh, and why does #maincontent have position:absolute? And what's with the clearing?

ThorPlusA
—
2011-05-07T22:10:15Z —
#8

Ok, sorry, I wasn't completely clear about all this. Firstly, the reason I'm using absolute positioning is because I have a horizontal menu bar above the #maincontent div that uses float (because it has drop-down components). The absolute positioning is the only way I could find to keep the rest of the content from floating around the drop-down parts of the menu. That is, I don't want the page to move or change at all when I mouse over the nav bar and the drop-down part appears.

I'm aware that using absolute positioning takes a div out of the flow of the rest of the content, but I can't really find another way around the issue. So basically, what I'm trying to do is to get #pagewidth to stretch to be as tall as the page, not just the window (which is how it is now), so that it is present around all the content in #maincontent.

For example, this is what happens now when the content exceeds the size of the browser window:but I want it to do this instead:

No, I'm using float for the menu. I'm using absolute positioning for the content because if I use relative positioning for it, it moves down every time I mouse over the menu bar. I've added "clear: both;" to the main content, too, but it still moves down whenever the dropdown appears. If I could find another way around that particular problem, the "height: 100%" stuff wouldn't be a problem, since that's due to the absolute positioning.

PicnicTutorials
—
2011-05-07T22:43:26Z —
#12

Ok. Make the nav nothing. Just put it there. Make the nested ul position absolute. That way nothing moves. Now you can get rid of the AP on your main content and the page should stretch as you want.

ThorPlusA
—
2011-05-07T22:43:44Z —
#13

to better demonstrate what I mean, this is what happens to the main content of the page when I use relative positioning.

before mousing over the nav bar it looks like this:

and upon mousing over everything moves down:

So if I can find a way to stop the content from moving around that floating nav bar, that nullifies my height problem.

Once again, thank you guys for your help.

ThorPlusA
—
2011-05-07T22:44:41Z —
#14

EricWatson said:

Ok. Make the nav nothing. Just put it there. Make the nested ul position absolute. That way nothing moves. Now you can get rid of the AP on your main content and the page should stretch as you want.

can you explain what you mean by "make the nav nothing"?

ralphm
—
2011-05-08T00:51:59Z —
#15

The standard way to do a dropdown is to make the top-level navigation (the horizonatal UL) position: relative, and then the sub lists position: absolute. The position: relative on the main menu doesn't affect its position on the page or affect how other elements interact with it, so it's quite safe to use.

PaulOB
—
2011-05-08T13:54:56Z —
#16

Hi,

Read the CSS FAQ on 100% height (see my sig) as it will help you to understand when you can use it and more to the point why you can't use it most of the time.

You cannot nest elements of 100% height inside each other because that means the inner elements can never grow as they are limited to the initial height of the parent and will just overflow as you found out.

Neither can you nest min-height:100% elements because you can't base a percentage min-height on a parent that doesn't have a defined height. The height just defaults to auto (effectively content height).

It's a catch 22 situation and effectively you can only ever have 1 100% height element on the page and that is the first element on the page only (and contains all content) and it will be min-height:100% and basing its height from html,body{height:100%}.

Everything must be done on his one element only which is why the faux column approach is easiest when you want multiple equal columns.

For IE8+ you could use the display:table properties to make height:100% expand but this won't work in IE7 and under so is seldom used.

There is another way to make multiple background and that is to use an absolute overlay method to provide background colours only as mentioned [in this example. That will allow you to do [URL="http://www.pmob.co.uk/temp/sticky-footer-multiple-backgrounds.htm"]clever things like this](http://www.pmob.co.uk/search-this/absolute-columns3-hide.htm).

However it looks from your example that you only have one background that needs to be 100% and as Dresdens example above shows you should be able to do that relatively easily using the basic principal as mentioned earlier.

If you want specific help with your code then we'd probably need to see the site to have something to play around with properly.:)

As others have said above the nav itself can be in the flow to take up room but just make the dropdowns absolute. If that's too awkward to change with the way you have it set up then just account for the space the top nav takes in the flow with some padding on an adjacent element.

PicnicTutorials
—
2011-05-08T14:50:15Z —
#17

ThorPlusA said:

can you explain what you mean by "make the nav nothing"?

Sure, it was just a stupid way of saying don't give it any CSS - just put it there (aka position static). But as Ralph and others pointed out I forgot the key piece there - position relative. In short, I provided no helpful information within this thread - lol.

ThorPlusA
—
2011-05-08T17:10:29Z —
#18

Thank you guys all so much for your help! I changed the nav bar to use relative and absolute positioning, and everything works now.

ThorPlusA
—
2011-05-08T17:13:19Z —
#19

Felt victorious a bit too early there. It works in Safari and Firefox, but in Opera, the submenu appears when I mouseover the header, but disappears as soon as I move the mouse down towards the submenu. Any ideas as to why this might be happening?

PaulOB
—
2011-05-08T19:38:29Z —
#20

ThorPlusA said:

Felt victorious a bit too early there. It works in Safari and Firefox, but in Opera, the submenu appears when I mouseover the header, but disappears as soon as I move the mouse down towards the submenu. Any ideas as to why this might be happening?

This usually happens if the submenu isn't touching the parent. There can be no gap between the submenu and the parent trigger or the focus is lost and the menu disappears.