Please ignore the broken images - this is just for testing and debugging purposes. In IE the container div acts like I thought it should, and you can see the border for that container goes all the way to the bottom of the page. In the other browsers is stops near the top of the page and everything else just spills out underneath it. Also, I had set specific heights for the columns which worked great in IE - if the content was too big, then the columns just got longer, but in NS and FF the content spilled out of the div's. So, I changed the height from a specific height to a min-height which now works great in NS and FF but as you can see in IE the min-height is not working.
Sorry for making my first post here so long winded... I have been searching for answers to this all day with no success. Any help would be greatly appreciated!
Ok thanks. If I use defined heights though, then the text spills out in Netscape and Firefox... is there a way to do both?
Also, the body and div height set at 100% - is that necessary? I didn't have that before in the css and it still worked great in IE (the container div grew as the content inside it grew). I just put it in to see if it fixed the problem in Netscape. Do div's with nested div's inside not grow so that the nested divs and content fit inside? It looks like they do in IE, but not the other browsers? Is there a different way I should be doing it so that the "container" div just grows depending on what is inside? I hope what I am asking is making sense....
It does exactly what I want in IE but if you scroll down in netscape you'll see the borders don't expand to contain all the divs. Also it seems to push the 4 contained divs up higher somehow... I might have to go back to tables.
Does anyone have any suggestions as to what I'm doing wrong? Could it be because the div's are floating?
Have you tried viewing the page with an image where it should be?
I think the problem is the fact that the image isn't there and therefore the page isn't rendering properly.
However i have found this fix for it as it stands at the moment. Add the following code to your CSS:
But really there should be an image. If you don't want the header butt up against the image box, then change the value of the padding-top in the #pageheader h1 section and this'll move it down from the top
Hope this helps the problem.
"An expert is a person who has made all the mistakes that can be made in a very narrow field."
So now it looks better in Netscape and Firefox, but I still have the original problem of that container not expanding to fit all nested divs inside. It's 100% height of the window, but if you scroll down (at least in 1024x768 or lower) the content still spills out underneath.
Am I stuck with defining a set height for the container and changing it everytime the content inside it changes?
As the html code hides the first 'pages' text and only leaves "Chrome" viewable, the parent divs are sized to match that. As this is one of the smaller divs when you change tab the text overflows the div, and the parent divs are not resized.
Edit:The solution to the problem as far as I can tell is to search your code for the following text: