Hi, I’m designing a site that has multiple divs within in each other, and I’m trying to get a div to stretch the length of the content that’s in a div within in.
The html looks like this:
<html>
<body>
<div id=“pagewidth”>
<div id=“maincontent”>
<p>the content goes here</p>
</div>
</div>
</body>
</html>
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.)
How can I get that div to stretch to fill 100% of the page?
So how exactly would using faux columns help me?
I’ve also set the background for each div to repeating background images, but they stop when the div stops and the end of the browser window.
Welcome to SitePoint!
Am afraid you are misinterpreting a few concepts in your code and may have to rethink what you are trying to do.
#1) you have some conflicting rules, but that not what really holding you back #2) you used position:absolute; on #maincontent this takes your element out of the normal flow. that means that the size of #maincontent doesn’t affect its parent #pagewidth.
anyway, may have miscalculated some numbers for the exact dimensions of your page, but i think this is what you were trying to achieve:
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?
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.
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.
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.
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.
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.
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.
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.
