Division Stretching

[Exuro]

I've been having a problem with getting my divisions to take up the full width of the page, and after deciding I'd had enough of this headache I decided to come here and hope that someone could possibly help me out...

Okay, I'm playing around with a non-static layout. My page conists of a few divisions lined up vertically containing my banner, the menu, and a content division. However, when the window is resized so that the menu does not fit horizontally on the screen some strange things start happening.

In both IE6 and Firefox 0.8 the division around the banner shrinks exposing the background color (grey) when you scroll over to the right side of the screen. In the Mozilla browser the effects are even worse because the division containing my links also shrinks down when the window is resized, and when you scroll over to the left the links are left exposed over the background color. It looks terrible...

The sickening thing is that when I tried wrapping the page in a table it worked fine. I know tables arn't meant for layout, and I really don't like using them for that purpose. Shouldn't I be able to achieve the correct display without having to resort to using tables or specifying static widths?

[DaveSW]

What if you wrap it in a div rather than a table?

[Exuro]

I tried that actually, and that seemed to fix the problem in IE, but it did nothing in Mozilla.

[Exuro]

Actually, I must have forgot to the tabled layout in Mozilla beforehand, because it does the exact same thing as it does without the table.

So I guess I know how to fix it for IE, I just wrap the stuff in another div because in IE divs resize to their content. However, this doesn't seem to be true in mozilla and no matter what I do (short of setting a static width) I'm unable to get it to display correctly...

[Exuro]

I don't think there is any way to fix this short of setting a specified width for Mozilla, so I guess I'll just give my elements a min-width in Mozilla and then hopefully that will work well enough...

[DaveSW]

What if you apply your background to a container div around all the top stuff? (banner + menu)

[Exuro]

The problem was that in Mozilla containers (in this case my divisions) do not stretch so that they can hold their content. At least I couldn't get them to... The result was that my menu division would shrink to the size of the window, but my menu would still go way off the side into the area that you need to scroll to the right in order to see.

Since the container wrapped around everything would not stay wrapped around everything (it would shrink unless I specified a width) then it really wouldn't end up doing much good...

[David Harrison]

On the off chance that it will help, can you post a link to your page?

[Exuro]

I had two links posted originally, but I removed them since the pages were no longer there after I decided my problem was hopeless. If you want to look at it though and try to fix it here's another link:

http://67.168.193.207/alpha/index2.aspx

Open that in Mozilla, and resize your window so the horizontal scroll bar comes up, then scroll over to the right and you'll see that the divisions have shrunk to the size of the window and that the content is overflowing.